เป็นไปได้ไหมที่จะทำให้แท็ก Anchor HTML ไม่สามารถคลิกได้ / เชื่อมโยงได้โดยใช้ CSS?

เช่นถ้าฉันมีสิ่งนี้:

<a style="" href="page.html">page link</a>

มีสิ่งใดบ้างที่ฉันสามารถใช้สำหรับแอตทริบิวต์สไตล์ที่จะทำให้ลิงก์นั้นไม่สามารถคลิกได้และจะไม่พาฉันไปที่ page.html

หรือเป็นตัวเลือกเดียวของฉันที่จะไม่ห่อ 'ลิงค์หน้า' ในแท็กสมอ?

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

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

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

<a id="current" href="link.html">link</a>

จากนั้นให้นักพัฒนาซอฟต์แวร์ควบคุมสไตล์การเชื่อมโยงผ่าน CSS

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

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

จากนั้นกำหนดคลาสให้กับรหัส html ของคุณ:

<a style="" href="page.html" class="inactiveLink">page link</a>

มันทำให้ลิงก์ไม่สามารถคลิกได้และลักษณะเคอร์เซอร์เป็นลูกศรไม่ใช่มือเหมือนกับที่ลิงค์มี

หรือใช้สไตล์นี้ใน html:

<a style="pointer-events: none; cursor: default;" href="page.html">page link</a>

แต่ฉันขอแนะนำวิธีแรก

นั่นไม่ใช่เรื่องง่ายที่จะทำกับ CSS เนื่องจากไม่ใช่ภาษาพฤติกรรม (เช่นจาวาสคริปต์) วิธีที่ง่ายเพียงอย่างเดียวคือการใช้จาวาสคริปต์ OnClick Event บนสมอเรือของคุณและส่งคืนเป็นเท็จซึ่งอาจเป็นรหัสที่สั้นที่สุด คุณสามารถใช้สำหรับ:

<a href="page.html" onclick="return false">page link</a>

ใช่ .. มันเป็นไปได้ที่จะใช้css

<a class="disable-me" href="page.html">page link</a>

.disable-me {
    pointer-events: none;
}

หรือ HTML และ CSS ล้วนๆโดยไม่มีเหตุการณ์:

<div style="z-index: 1; position: absolute;">
    <a style="visibility: hidden;">Page link</a>
</div>
<a href="page.html">Page link</a>

CSS ถูกออกแบบมาเพื่อส่งผลกระทบต่อการนำเสนอไม่ใช่พฤติกรรม

คุณสามารถใช้ JavaScript ได้

document.links[0].onclick = function(event) {
   event.preventDefault();
};

วิธีที่ไม่เสแสร้งมากขึ้น (สมมติว่าคุณใช้ jQuery):

HTML:

<a id="my-link" href="page.html">page link</a>

javascript:

$('#my-link').click(function(e)
{
    e.preventDefault();
});

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

คำตอบคือ:

<a href="page.html" onclick="return false">page link</a>

มันสามารถทำได้ใน CSS และมันง่ายมาก เปลี่ยน "a" เป็น "p" "การเชื่อมโยงหน้า" ของคุณไม่ได้นำไปสู่ที่ใดที่หนึ่งถ้าคุณต้องการทำให้มันไม่สามารถคลิกได้

เมื่อคุณบอก css ของคุณให้ดำเนินการโฮเวอร์กับ "p" เฉพาะนี้ให้บอกสิ่งนี้:

(สำหรับตัวอย่างนี้ฉันได้ให้ "p" the "ตัวอย่าง" ID)

#example
{
  cursor:default;
}

ตอนนี้เคอร์เซอร์ของคุณจะยังคงเหมือนเดิมทุกประการ

<a href="page.html" onclick="return false" style="cursor:default;">page link</a>