Est-il possible de rendre une balise d'ancrage HTML non cliquable/lienable à l'aide de CSS ?

Question

Par exemple, si j'ai ceci :

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

Y a-t-il quelque chose que je puisse utiliser pour l'attribut style afin que le lien ne soit pas cliquable et ne m'amène pas à la page.html ?

Ou bien la seule solution consiste-t-elle à ne pas insérer le "lien de page" dans une balise d'ancrage ?

Edita: Je veux expliquer pourquoi je veux faire cela afin que les gens puissent me donner de meilleurs conseils. J'essaie de configurer mon application de manière à ce que le développeur puisse choisir le style de navigation qu'il souhaite.

J'ai donc une liste de liens et l'un d'entre eux est toujours sélectionné alors que tous les autres ne le sont pas. Pour les liens qui ne sont pas sélectionnés, je veux évidemment qu'ils soient des balises d'ancrage cliquables normales. Mais pour le lien sélectionné, certaines personnes préfèrent qu'il reste cliquable, tandis que d'autres préfèrent qu'il ne le soit pas.

Maintenant, je pourrais facilement, par programme, ne pas entourer le lien sélectionné d'une balise d'ancrage. Mais je pense que ce sera plus élégant si je peux toujours envelopper le lien sélectionné dans quelque chose comme :

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

et laisser le développeur contrôler le style du lien par le biais de CSS.

Answer 1

Vous pouvez utiliser ce code :

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

Puis assignez la classe à votre code html :

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

Le lien ne peut plus être cliqué et le curseur prend la forme d'une flèche et non d'une main comme pour les liens.

ou utiliser ce style dans le html :

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

mais je suggère la première approche.

Answer 2

Ce n'est pas très facile à faire avec CSS, car ce n'est pas un langage comportemental (c'est-à-dire JavaScript), le seul moyen facile serait d'utiliser un événement JavaScript OnClick sur votre ancre et de la renvoyer comme fausse, c'est probablement le code le plus court que vous puissiez utiliser pour cela :

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

Answer 3

Oui.. Il est possible en utilisant css

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

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

Answer 4

Ou purement HTML et CSS sans événements :

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

Answer 5

Les feuilles de style CSS ont été conçues pour influer sur la présentation, et non sur le comportement.

Vous pourriez utiliser du JavaScript.

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