ฉันจะปิดการใช้งานลิงก์ href ใน JavaScript ได้อย่างไร

ฉันมีแท็ก<a href="#"> Previous </a> 1 2 3 4 <a href="#"> Next </a>และในบางเงื่อนไขฉันต้องการให้แท็กนี้ถูกปิดใช้งานโดยสิ้นเชิง

รหัสจากความคิดเห็น (นี่คือวิธีสร้างลิงค์)

if (n_index != n_pages) 
    a = a+'<li><a href="#" onclick="javascript:paginateAjaxPage('+(n_index+1) +','+stype+');">></a></li><li><a href="#" onclick="javascript:paginateAjaxPage('+n_pages+','+stype+');" >>></a></li>'; 
else 
    a = a+'<li><a style="cursor: pointer;" onclick="return false;">></a></li><li><a style="cursor: pointer;" onclick="return false" >>></a></li>'; 
a = a+'</ul></div>';

ลองทำเช่นนี้เมื่อคุณไม่ต้องการให้ผู้ใช้เปลี่ยนเส้นทางเมื่อคลิก

<a href="javascript: void(0)">I am a useless link</a>

คุณสามารถปิดใช้งานลิงก์ทั้งหมดในเพจด้วยคลาสสไตล์นี้:

a {
    pointer-events:none;
}

แน่นอนว่าเคล็ดลับคือปิดใช้งานลิงก์เมื่อคุณต้องการเท่านั้นนี่คือวิธีการ:

ใช้คลาส A ที่ว่างเปล่าเช่นนี้:

a {}

จากนั้นเมื่อคุณต้องการปิดใช้งานลิงก์ให้ดำเนินการดังนี้:

    GetStyleClass('a').pointerEvents = "none"

    function GetStyleClass(className)
    {
       for (var i=0; i< document.styleSheets.length; i++) {
          var styleSheet = document.styleSheets[i]

          var rules = styleSheet.cssRules || styleSheet.rules

          for (var j=0; j<rules.length; j++) {
             var rule = rules[j]

             if (rule.selectorText === className) {
                return(rule.style)
             }
          }
       }

       return 0
    }

หมายเหตุ: ชื่อกฎ CSS จะเปลี่ยนเป็นตัวพิมพ์เล็กในบางเบราว์เซอร์และรหัสนี้คำนึงถึงตัวพิมพ์เล็กและใหญ่ดังนั้นควรใช้ชื่อคลาสตัวพิมพ์เล็กสำหรับสิ่งนี้

เพื่อเปิดใช้งานลิงก์อีกครั้ง:

GetStyleClass('a').pointerEvents = ""

ตรวจสอบหน้านี้http://caniuse.com/pointer-eventsสำหรับข้อมูลเกี่ยวกับความเข้ากันได้ของเบราว์เซอร์

ฉันคิดว่านี่เป็นวิธีที่ดีที่สุด แต่น่าเสียดายที่ IE จะไม่อนุญาตเช่นเคย :) ฉันโพสต์สิ่งนี้อยู่แล้วเพราะฉันคิดว่าสิ่งนี้มีข้อมูลที่อาจเป็นประโยชน์และเนื่องจากบางโครงการใช้เบราว์เซอร์ที่รู้จัก เช่นเมื่อคุณใช้การดูเว็บบนอุปกรณ์เคลื่อนที่

หากคุณต้องการปิดการใช้งานเพียงลิงก์เดียว (ฉันรู้แค่ว่านั่นคือคำถาม) ฉันจะใช้ฟังก์ชันที่กำหนดเองด้วยตนเองในการกำหนด URL ของหน้าปัจจุบันหรือไม่ตามเงื่อนไขนั้น (เช่นโซลูชันที่คุณยอมรับ)

คำถามนี้ง่ายกว่าที่คิดไว้เยอะเลย :)

คุณสามารถให้แฮชว่างเปล่า:

anchor.href = "#";

หรือหาก "ปิดใช้งาน" ไม่ดีพอให้ใช้ตัวจัดการเหตุการณ์:

anchor.href = "javascript:void(0)";

ลองใช้ jQuery:

$(function () {
    $('a.something').on("click", function (e) {
        e.preventDefault();
    });
});

anchor.href = null;

(function ($) {
    $( window ).load(function() {
        $('.navbar a').unbind('click');
        $('.navbar a').click(function () {
            //DO SOMETHING
            return false;
        });
    });
})(jQuery);

ฉันพบวิธีนี้ง่ายกว่าในการนำไปใช้ และมีข้อดีตรงที่คุณ js. ไม่ได้อยู่ใน html ของคุณ แต่อยู่ในไฟล์อื่น ฉันคิดว่าถ้าไม่มีการผูกมัด ทั้งสองเหตุการณ์ยังคงดำเนินอยู่ ไม่แน่ใจ. แต่ในทางที่คุณต้องการเพียงกิจกรรมนี้

MDN แนะนำให้element.removeAttribute(attrName);ตั้งค่าแอตทริบิวต์เป็น null (หรือค่าอื่น ๆ ) เมื่อคุณต้องการปิดใช้งาน ในกรณีนี้ก็จะเป็นelement.removeAttribute("href");

https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute

วิธีที่ง่ายที่สุดในการปิดการใช้งานลิงก์คือไม่ต้องแสดงลิงก์ เรียกใช้ฟังก์ชันนี้ทุกครั้งที่คุณต้องการทดสอบว่าตรงตามเงื่อนไขหรือไม่เพื่อซ่อนปุ่มก่อนหน้า (แทนที่if (true)ด้วยเงื่อนไขของคุณ):

var testHideNav = function() {
    var aTags = document.getElementsByTagName('a'),
        atl = aTags.length,
        i;

    for (i = 0; i < atl; i++) {
        if (aTags[i].innerText == "Previous") {
            if (true) { // your condition to disable previous
                aTags[i].style.visibility = "hidden";
            } else {
                aTags[i].style.visibility = "visible";
            }
        } else if (aTags[i].innerText == "Next") {
            if (false) { // your condition to disable next
                aTags[i].style.visibility = "hidden";
            } else {
                aTags[i].style.visibility = "visible";
            }
        }
    }
};

จากนั้นเรียกใช้testHideNav()เมื่อใดก็ตามที่คุณต้องการตรวจสอบว่าเงื่อนไขของคุณเปลี่ยนไปหรือไม่

ใช้ span และ javascript onclick แทน เบราว์เซอร์บางตัวจะ "กระโดด" หากคุณมีลิงก์และ href "#"

เป็นไปได้เช่นกัน:

<a href="javascript:void(0)" onclick="myfunction()">

ลิงก์ไม่ไปไหนโดยฟังก์ชันของคุณจะถูกเรียกใช้งาน

ฉันมีความต้องการที่คล้ายกัน แต่แรงจูงใจของฉันคือการป้องกันไม่ให้ลิงก์ถูกดับเบิลคลิก ฉันทำสำเร็จโดยใช้ jQuery:

$(document).ready(function() {
    $("#myLink").on('click', doSubmit);
});

var doSubmit = function() {
    $("#myLink").off('click');
    // do things here
};

HTML มีลักษณะดังนี้:

<a href='javascript: void(0);' id="myLink">click here</a>

ดังนั้นวิธีแก้ปัญหาข้างต้นจึงทำให้ลิงก์ไม่ทำงาน แต่อย่าทำให้มองเห็นได้ (AFAICT) แสดงว่าลิงก์นั้นใช้ไม่ได้อีกต่อไป ฉันมีสถานการณ์ที่ฉันมีชุดหน้าและต้องการปิดการใช้งาน (และทำให้เห็นได้ชัดว่าปิดใช้งาน) ลิงก์ที่ชี้ไปยังหน้าปัจจุบัน

ดังนั้น:

window.onload = function() {
    var topics = document.getElementsByClassName("topics");
    for (var i = topics.length-1; i > -1; i-- ) {
        for (var j = topics[i].childNodes.length-1; j > -1; j--) {
             if (topics[i].childNodes[j].nodeType == 1) {
                if (topics[i].childNodes[j].firstChild.attributes[0].nodeValue == this.n_root3) {
                    topics[i].childNodes[j].innerHTML = topics[i].childNodes[j].firstChild.innerHTML;
                }
            }
        }
    }
}

สิ่งนี้จะอธิบายรายชื่อลิงก์ค้นหาลิงก์ที่ชี้ไปยังหน้าปัจจุบัน (n_root3 อาจเป็นสิ่งที่อยู่ในท้องถิ่น แต่ฉันคิดว่าdocumentต้องมีสิ่งที่คล้ายกัน) และแทนที่ลิงก์ด้วยเนื้อหาข้อความลิงก์

HTH

ขอบคุณทุกคน...

ปัญหาของฉันแก้ไขได้ด้วยรหัสด้านล่าง:

<a href="javascript:void(0)"> >>> </a>

ติดตั้งปลั๊กอินนี้สำหรับ jquery และใช้งานได้

http://plugins.jquery.com/project/jqueryenabled ปิดใช้งาน

ช่วยให้คุณสามารถปิด / เปิดใช้งานฟิลด์ใดก็ได้ในหน้านี้

หากคุณต้องการเปิดเพจในเงื่อนไขบางอย่างให้เขียนฟังก์ชัน java script และเรียกใช้จาก href หากเงื่อนไขเป็นที่พอใจคุณเปิดหน้าเป็นอย่างอื่นก็ไม่ต้องทำอะไร

รหัสมีลักษณะดังนี้:

<a href="javascript: openPage()" >Click here</a>

and function:
function openPage()
{
if(some conditon)
opener.document.location = "http://www.google.com";
}
}

คุณยังสามารถใส่ลิงก์ใน div และตั้งค่าคุณสมบัติการแสดงผลของแอตทริบิวต์ Style เป็น none สิ่งนี้จะซ่อน div เช่น

<div id="divid" style="display:none">
<a href="Hiding Link" />
</div>

เพื่อซ่อนลิงค์ ใช้ปุ่มหรือรูปภาพเพื่อทำให้ div นี้มองเห็นได้ทันทีโดยเรียกใช้ฟังก์ชันนี้ใน onclick ว่า:

<a href="Visible Link" onclick="showDiv()">

and write the js code as:

function showDiv(){
document.getElememtById("divid").style.display="block";
}

คุณยังสามารถใส่แท็ก id ลงในแท็ก html ได้เช่นกัน

<a id="myATag" href="whatever"></a>

และรับรหัสนี้บนจาวาสคริปต์ของคุณโดยใช้

document.getElementById("myATag").value="#"; 

หนึ่งในนี้ต้องได้ผลแน่นอนฮ่า ๆ

อีกวิธีหนึ่งในการปิดการใช้งานลิงค์

element.removeAttribute('href');

แท็กจุดยึดที่ไม่มี href จะตอบสนองเป็นข้อความปิดใช้งาน / ธรรมดา

<a> w/o href </a>

แทน <a href="#"> with href </a>

ดู jsFiddel

หวังว่านี่จะเป็นผลดี

แทนที่จะเป็นโมฆะคุณยังสามารถใช้:

<a href="javascript:;">this link is disabled</a> 

0)คุณควรจำไว้ว่าเบราว์เซอร์บางตัว "กระโดด" หากคุณมีลิงก์และ "#" href ดังนั้นวิธีที่ดีที่สุดคือJavaScript ที่กำหนดเอง

1)หากคุณตามด้วยJavaScript ที่กำหนดเองนี่คือ:

<a href="#" onclick="DoSomething(); return false;">Link</a>

"ส่งคืนเท็จ" ป้องกันไม่ให้ติดตามลิงก์จริง

2)คุณอาจพิจารณาหลีกเลี่ยงการใช้สิ่งต่อไปนี้

<a href="javascript:void(0);" onclick="DoSomething();">Link</a>

หรือ

  <a href="javascript:;" onclick="DoSomething();">Link</a>

เนื่องจากโปรโตคอลหลอกจาวาสคริปต์สามารถทำให้เพจอยู่ในสถานะรอในบางเบราว์เซอร์ซึ่งอาจส่งผลที่ไม่คาดคิดได้ IE6 ขึ้นชื่อเรื่องนี้ แต่ถ้าคุณไม่สนใจ IE6 และคุณกำลังทดสอบทุกอย่างอาจเป็นทางออกที่ดี

3)หากคุณมีjQueryและbootstrapอยู่ในโครงการของคุณอยู่แล้วคุณสามารถใช้มันได้ดังนี้:

$('.one-click').on("click", function (e) {
   $( this ).addClass('disabled');
});

ที่ไหน .disabledคลาสมาจาก bootstrap

Qupte form bootstrap site ( ที่นี่ )

ข้อแม้การทำงานของลิงก์

คลาส. disabled ใช้pointer-events: noneเพื่อพยายามปิดใช้งานฟังก์ชันการเชื่อมโยงของ s แต่คุณสมบัติ CSS นั้นยังไม่เป็นมาตรฐาน นอกจากนี้แม้ในเบราว์เซอร์ที่รองรับตัวชี้เหตุการณ์: ไม่มีการนำทางแป้นพิมพ์ยังคงไม่ได้รับผลกระทบซึ่งหมายความว่าผู้ใช้แป้นพิมพ์ที่มองเห็นและผู้ใช้เทคโนโลยีอำนวยความสะดวกจะยังคงเปิดใช้งานลิงก์เหล่านี้ได้ ดังนั้นเพื่อความปลอดภัยให้เพิ่มtabindex="-1"แอตทริบิวต์ในลิงก์เหล่านี้ (เพื่อป้องกันไม่ให้ได้รับการโฟกัสของแป้นพิมพ์) และใช้custom JavaScriptเพื่อปิดฟังก์ชันการทำงาน

และcustom JavaScriptแสดงในส่วนที่1

ด้านล่างรหัสสำหรับลิงก์ที่ปิดใช้งาน:

<a href="javascript: void(0)">test disabled link</a> 

อีกวิธีหนึ่งที่ง่ายมากคือ:

<a href="#">test disabled link</a>

โซลูชันแรกมีประสิทธิภาพ