คุณทำให้ Anchor link ไม่สามารถคลิกหรือปิดใช้งานได้อย่างไร?

ฉันมีสมอลิงค์ที่ฉันต้องการปิดการใช้งานเมื่อผู้ใช้คลิกที่มัน หรือลบแท็กจุดยึดออกจากรอบ ๆ ข้อความ แต่ให้เก็บข้อความไว้อย่างแน่นอน

<a href='' id='ThisLink'>some text</a>

ฉันสามารถทำได้อย่างง่ายดายด้วยปุ่มโดยการเพิ่ม.attr("disabled", "disabled");
ฉันเพิ่มคุณสมบัติปิดใช้งานสำเร็จแล้ว แต่ลิงก์ยังคงคลิกได้
ฉันไม่สนใจจริงๆว่าข้อความจะถูกขีดเส้นใต้หรือไม่

เบาะแสใด ๆ ?

เมื่อคุณคลิกที่นักดนตรีที่ไม่ถูกต้องควรเพิ่มคำว่า "ผิด" จากนั้นจึงไม่สามารถคลิกได้
เมื่อคุณคลิกและคุณถูกต้องควรเพิ่ม "Awesome" จากนั้นปิดใช้งาน<a>แท็กทั้งหมด

ฉันเพิ่งรู้ว่าคุณกำลังขออะไร (ฉันหวังว่า) นี่เป็นวิธีแก้ปัญหาที่น่าเกลียด

var preventClick = false;

$('#ThisLink').click(function(e) {
    $(this)
       .css('cursor', 'default')
       .css('text-decoration', 'none')

    if (!preventClick) {
        $(this).html($(this).html() + ' lalala');
    }

    preventClick = true;

    return false;
});

วิธีที่สะอาดที่สุดคือการเพิ่มคลาสที่มีตัวชี้เหตุการณ์: ไม่มีเมื่อคุณต้องการปิดใช้งานการคลิก มันจะทำงานเหมือนป้ายกำกับปกติ

.disableClick{
    pointer-events: none;
}

<a href='javascript:void(0);'>some text</a>

ใช้สไตล์ CSS ของตัวชี้เหตุการณ์ (ตามที่ Jason MacDonald แนะนำ)

ดู MDN https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events รองรับในเบราว์เซอร์ส่วนใหญ่

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

a[disabled], a[disabled]:hover {
   pointer-events: none;
   color: #e1e1e1;
}

$('a').removeAttr('href')

หรือ

$('a').click(function(){ return false})

ขึ้นอยู่กับสถานการณ์

Bootstrap ให้เรามี.disabledคลาส กรุณาใช้มัน

แต่.disabledคลาสจะใช้ได้เฉพาะเมื่อแท็ก "a" มีคลาส "btn" อยู่แล้วเท่านั้น มันใช้ไม่ได้กับแท็ก "a" เก่า ๆ btnระดับอาจจะไม่เหมาะสมในบริบทบางอย่างที่มันมีความหมายสไตล์ ภายใต้ฝาครอบ.disabledชั้นเรียนpointer-eventsจะตั้งค่าเป็นnoneดังนั้นคุณสามารถสร้าง CSS เพื่อทำสิ่งเดียวกับที่ Saroj Aryal และ Vitrilo ได้รับความนิยม (ขอบคุณ Les Nightingill สำหรับคำแนะนำนี้)

เพิ่มcssชั้นเรียน:

.disable_a_href{
    pointer-events: none;
}

เพิ่มสิ่งนี้jquery:

$("#ThisLink").addClass("disable_a_href"); 

เพียงแค่ลบhrefแอตทริบิวต์ออกจากแท็กจุดยึด

วิธีที่ดีที่สุดคือการป้องกันการกระทำเริ่มต้น ในกรณีของแท็กจุดยึดพฤติกรรมเริ่มต้นจะเปลี่ยนเส้นทางไปยังhrefที่อยู่ที่ระบุ

ดังนั้นการติดตาม javascript จึงทำงานได้ดีที่สุดในสถานการณ์:

$('#ThisLink').click(function(e)
{
    e.preventDefault();
});

คุณสามารถใช้เหตุการณ์ onclick เพื่อปิดใช้งานการดำเนินการคลิก:

<a href='' id='ThisLink' onclick='return false'>some text</a>

หรือคุณจะใช้อย่างอื่นที่ไม่ใช่<a>แท็กก็ได้

ความคิดเห็นของ Jason MacDonald ใช้ได้ผลสำหรับฉันทดสอบใน Chrome, Mozila และ IE

เพิ่มสีเทาเพื่อแสดงเอฟเฟกต์ปิดการใช้งาน

.disable_a_href{
    pointer-events: none;
    **color:#c0c0c0 !important;**
}

Jquery ถูกเลือกองค์ประกอบแรกเท่านั้นในรายการสมอเพิ่มตัวละครเมตา (*) เพื่อเลือกและปิดการใช้องค์ประกอบทั้งหมดที่มี #ThisLinkID

$("#ThisLink*").addClass("disable_a_href"); 

เขียน jQuery Code บรรทัดเดียว

$('.hyperlink').css('pointer-events','none');

หากคุณต้องการเขียนในไฟล์ css

.hyperlink{
    pointer-events: none;
}

สร้างคลาสต่อไปนี้ในสไตล์ชีต:

  .ThisLink{
           pointer-events: none;
           cursor: default;
    }

เพิ่มคลาสนี้ให้คุณเชื่อมโยงแบบไดนามิกดังต่อไปนี้

 <a href='' id='elemID'>some text</a>

    //   or using jquery
<script>
    $('#elemID').addClass('ThisLink');
 </script>

ลองสิ่งนี้:

$('a').contents().unwrap();

เพียงแค่ใน SASS:

.some_class{
     // styles...

     &.active {
       pointer-events:none;
     }
}

นี่เป็นวิธีที่ฉันใช้ปิดการใช้งานหวังว่าจะช่วยได้

$("#ThisLink").attr("href","javascript:;");

$('#ThisLink').one('click',function(){
  $(this).bind('click',function(){
    return false;
  });
});

นี่เป็นอีกวิธีหนึ่งในการดำเนินการนี้ตัวจัดการreturn falseที่จะปิดการใช้งานลิงก์จะถูกเพิ่มหลังจากคลิกเพียงครั้งเดียว

วิธีที่ง่ายที่สุด

ใน html ของคุณ:

<a id="foo" disabled="true">xxxxx<a>

ใน js ของคุณ:

$('#foo').attr("disabled", false);

หากคุณใช้เป็นแอตทริบิวต์ทำงานได้อย่างสมบูรณ์