Est-il possible de rendre une balise d'ancrage HTML non cliquable / liable en utilisant CSS?
Par exemple si j'ai ceci:
<a style="" href="page.html">page link</a>
Y a-t-il quelque chose que je peux utiliser pour l'attribut style qui fera en sorte que le lien ne soit pas cliquable et ne m'amène pas à la page.HTML.
Ou est-ce ma seule option pour simplement ne pas envelopper 'lien de page' dans une balise d'ancrage?
Edit: je veux expliquer pourquoi je veux faire cela pour que les gens puissent fournir de meilleurs conseils. J'essaie de configurer mon application afin que le développeur puisse choisir quel type de style de navigation qu'ils veulent.
J'ai donc une liste de liens et l'un est toujours sélectionné et tous les autres ne le sont pas. pour les liens qui ne sont pas sélectionnés, je veux é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 alors que d'autres aiment à faire pas cliquable.
Maintenant, je pourrais facilement simplement ne pas enrouler les balises d'ancrage autour du lien sélectionné. Mais je pense que ce sera plus élégant si je peux toujours envelopper le sélectionné lien 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.
9 réponses
Vous pouvez utiliser ce css:
.inactiveLink {
pointer-events: none;
cursor: default;
}
Puis affectez la classe à votre code html:
<a style="" href="page.html" class="inactiveLink">page link</a>
Il rend le lien non cliquable et le style du curseur une flèche, pas une main comme les liens ont.
Ou utilisez 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.
Ce n'est pas trop facile à faire avec CSS, car ce n'est pas un langage comportemental (Ie JavaScript), le seul moyen facile 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 que vous pourriez utiliser pour cela:
<a href="page.html" onclick="return false">page link</a>
Oui.. , Il est possible utiliser css
<a class="disable-me" href="page.html">page link</a>
.disable-me {
pointer-events: none;
}
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>
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();
};
Une manière plus non envahissante (en supposant que vous utilisez 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 la logique et la présentation. Si un jour vous décidez que ce lien ferait autre chose, vous n'avez pas à jouer avec le balisage, juste le JS.
, La réponse est:
<a href="page.html" onclick="return false">page link</a>
<a href="page.html" onclick="return false" style="cursor:default;">page link</a>
Cela peut être fait en css et c'est très simple. changer le "a" à "p". Votre "lien de page" ne mène pas à quelque part de toute façon si vous voulez le rendre unclickable.
Lorsque vous dites à votre css de faire une action de survol sur ce "p" spécifique, dites-le Ceci:
(pour cet exemple, j'ai donné le "P" L'ID "example")
#example
{
cursor:default;
}
Maintenant, votre curseur restera le même que sur toute la page.