Apakah mungkin membuat tag anchor HTML tidak dapat diklik / ditautkan menggunakan CSS?

Sebagai contoh jika saya memiliki ini:

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

Apakah ada yang bisa saya gunakan untuk atribut style yang akan membuatnya sehingga tautan tidak dapat diklik dan tidak akan membawa saya ke page.html?

Atau, apakah satu-satunya pilihan saya untuk tidak membungkus 'tautan halaman' dalam tag jangkar?

Edit: Saya ingin menyatakan mengapa saya ingin melakukan ini sehingga orang mungkin dapat memberikan saran yang lebih baik. Saya mencoba mengatur aplikasi saya sehingga pengembang dapat memilih jenis gaya navigasi yang mereka inginkan.

Jadi, saya punya daftar tautan dan satu selalu dipilih saat ini dan yang lainnya tidak. Untuk tautan yang tidak dipilih, saya jelas ingin itu menjadi tag jangkar yang dapat diklik normal. Tetapi untuk tautan yang dipilih, beberapa orang lebih suka bahwa tautan itu tetap dapat diklik sementara yang lain suka membuatnya tidak dapat diklik.

Sekarang saya bisa dengan mudah hanya secara program tidak membungkus jangkar tag di sekitar tautan yang dipilih. Tapi saya pikir itu akan lebih elegan jika saya selalu dapat membungkus tautan yang dipilih dalam sesuatu seperti:

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

dan kemudian biarkan pengembang mengontrol gaya penautan melalui CSS.

Anda dapat menggunakan css ini:

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

Dan kemudian menetapkan kelas ke kode html Anda:

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

Itu membuat tautan tidak dapat diklik dan kursor memberi tanda panah, bukan tangan seperti yang dimiliki tautan.

atau gunakan gaya ini di html:

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

tapi saya sarankan pendekatan pertama.

Itu tidak terlalu mudah dilakukan dengan CSS, karena itu bukan bahasa perilaku (yaitu JavaScript), satu-satunya cara mudah adalah dengan menggunakan Acara OnClick JavaScript pada jangkar Anda dan mengembalikannya sebagai false, ini mungkin kode yang terpendek Anda dapat menggunakannya untuk itu:

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

Ya .. Mungkin menggunakan css

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

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

Atau murni HTML dan CSS tanpa acara:

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

CSS dirancang untuk memengaruhi presentasi, bukan perilaku.

Anda dapat menggunakan beberapa JavaScript.

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

Cara yang lebih tidak mencolok (dengan asumsi Anda menggunakan jQuery):

HTML:

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

Javascript:

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

Keuntungan dari ini adalah pemisahan yang bersih antara logika dan presentasi. Jika suatu hari Anda memutuskan bahwa tautan ini akan melakukan hal lain, Anda tidak perlu mengacaukan markup, cukup JS.

Jawabannya adalah:

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

Ini dapat dilakukan dalam css dan sangat sederhana. ubah "a" menjadi "p". "Tautan halaman" Anda tidak mengarah ke suatu tempat jika Anda ingin membuatnya tidak dapat diklik.

Ketika Anda memberi tahu css Anda untuk melakukan aksi hover pada "p" spesifik ini, katakan ini:

(untuk contoh ini saya telah memberikan ID "p" the "example")

#example
{
  cursor:default;
}

Sekarang kursor Anda akan tetap sama seperti di seluruh halaman.

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