web-dev-qa-db-fra.com

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

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 qui le rendra afin que le lien ne puisse pas être cliqué et ne me conduise pas à page.html?

Ou bien, ma seule option est-elle simplement de ne pas envelopper le "lien de page" dans une balise d'ancrage?

Edit: Je veux expliquer pourquoi je veux le faire afin que les gens puissent donner de meilleurs conseils. J'essaie de configurer mon application de sorte que le développeur puisse choisir le type de style de navigation qu'il souhaite.

Donc, j'ai une liste de liens et un est toujours sélectionné et tous les autres ne le sont pas. Pour les liens qui ne sont pas sélectionnés, je souhaite évidemment que ceux-ci soient des balises d'ancrage cliquables normales. Mais pour le lien sélectionné, certaines personnes préfèrent que le lien reste cliquable, tandis que d'autres préfèrent le rendre non cliquable.

Maintenant, je pourrais facilement simplement ne pas enrouler de balises d’ancrage par programmation autour du lien sélectionné. 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>

puis laissez le développeur contrôler le style de liaison via CSS.

htmlcssanchor
116
Ryan

Vous pouvez utiliser ce css:

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

Et ensuite assignez la classe à votre code html:

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

Cela rend le lien non cliquable et le style du curseur une flèche et non une main comme les liens.

ou utilisez ce style dans le code HTML:

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

mais je suggère la première approche.

237
Diego Unanue

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

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

Oui .. C'est possible utiliser css

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

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

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>
8
Paulpro

CSS a été conçu pour affecter la présentation, pas le comportement.

Vous pouvez utiliser du JavaScript.

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

Une manière plus discrète (en utilisant jQuery):

HTML:

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

Javascript:

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

L'avantage de ceci est la séparation nette entre logique et présentation. Si un jour vous décidez que ce lien ferait autre chose, vous n'avez pas à vous soucier du balisage, mais simplement du JS.

5
pixelfreak

La réponse est:

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

Cela peut être fait en css et c'est très simple. remplacez le "a" par un "p". Votre "lien de page" ne mène de toute façon pas à quelque chose si vous voulez le rendre cliquable.

Quand vous dites à votre CSS de faire un survol sur ce "p" spécifique, dites-lui ceci:

(pour cet exemple j'ai donné le "p" l'ID "exemple")

#example
{
  cursor:default;
}

Maintenant, votre curseur restera le même que sur toute la page.

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