javascript - แท็ก href ถูกปิดใช้งาน

แม้ว่าลิงก์นั้นจะถูกปิดใช้งาน แต่ก็ยังสามารถคลิกได้

<a href="/" disabled="disabled">123n</a>

ฉันสามารถทำให้มันไม่สามารถคลิกได้ถ้ามันถูกปิดใช้งานหรือไม่? ฉันจำเป็นต้องใช้ JavaScript หรือไม่?

คำตอบ #1

ด้วยความช่วยเหลือของ CSS คุณจะปิดการใช้งานไฮเปอร์ลิงก์ ลองทำดังด้านล่าง

a.disabled {
  pointer-events: none;
  cursor: default;
}

<a href="link.html" class="disabled">Link</a>

คำตอบ #2

ไม่มีคุณสมบัติ disabled สำหรับลิงก์ หากคุณไม่ต้องการให้สิ่งใดถูกลิงก์ คุณจะต้องลบแท็ก <a> ออกทั้งหมด

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

คำตอบ #3

คุณสามารถใช้:

<a href="/" onclick="return false;">123n</a>

คำตอบ #4

คุณสามารถใช้หนึ่งในวิธีแก้ปัญหาเหล่านี้ได้:

เอชทีเอ็มแอล

<a>link</a>

JavaScript

<a href="javascript:function() { return false; }">link</a>
<a href="/" onclick="return false;">link</a>

CSS

<a href="www.page.com" disabled="disabled">link</a>

<style type="text/css">
    a[disabled="disabled"] {
        pointer-events: none;
    }
</style>

คำตอบ #5

ลองอันนี้:

<a href="javascript:void(0)" style="cursor: default;">123n</a>

คำตอบ #6

แท็ก <a> ไม่มีแอตทริบิวต์ disabled นั่นมีไว้เฉพาะสำหรับ <input> (และ <select> และ <textarea>)

ในการ "ปิดใช้งาน" ลิงก์ คุณสามารถลบแอตทริบิวต์ href ของมัน หรือเพิ่มตัวจัดการการคลิกที่ส่งค่ากลับเป็น false

คำตอบ #7

HTML :

<a href="/" class="btn-disabled" disabled="disabled">123n</a>

CSS :

.btn-disabled,
.btn-disabled[disabled] {
  opacity: .4;
  cursor: default !important;
  pointer-events: none;
}

คำตอบ #8

เคล็ดลับ 1: การใช้ CSS pointer-events: none;

เคล็ดลับ 2: การใช้ JavaScript javascript:void(0) (นี่คือแนวทางปฏิบัติที่ดีที่สุด)

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

เคล็ดลับ 1: การใช้ Jquery $ ('selector').attr("disabled","disabled");

คำตอบ #9

คุณต้องลบแท็ก <a> ออกเพื่อกำจัดสิ่งนี้

หรือพยายามใช้ :-

  <a href="/" onclick="return false;">123n</a>