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


133

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 fera en sorte que le lien ne soit pas cliquable et ne me mènera pas à page.html?

Ou, est-ce que ma seule option consiste simplement à ne pas envelopper le «lien de page» dans une balise d'ancrage?

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

Donc, j'ai une liste de liens et l'un est toujours actuellement 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 envelopper de balises d'ancrage 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.



3
Si vous ne souhaitez pas qu'il soit cliqué, utilisez peut-être un <span>?
David dit de réintégrer Monica le

Je devrais être d'accord avec David. Ne brisez pas les paradigmes de l'interface utilisateur. L'attente d'un utilisateur est que les liens peuvent être cliqués. Si vous ne pouvez pas cliquer dessus, ce n'est pas vraiment un lien, n'est-ce pas?
mrtsherman

Consultez stackoverflow.com/questions/2091168/disable-a-link-using-css pour d'autres réponses possibles.
Oliver

Ouais, c'est une idée terrible. Les lecteurs d'écran verront toujours le lien sous forme de lien, car il s'agit d'un lien. Les moteurs de recherche aussi. En fait, tout ce qui comprend le HTML. Ne fais pas ça. Il n'y a rien "d'élégant" à ce sujet.
Paul D. Waite

Réponses:


269

Vous pouvez utiliser ce css:

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

Et puis attribuez 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 est une flèche, pas une main comme le font les liens.

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.


Je peux confirmer que cela fonctionne sur la version Ubuntu de Firefox / Chrome. Vous vous demandez si cela fonctionnera sur IE sous Windows.
JohnMerlino le

3
La clé de cette solution est: pointer-events. Voici le lien pour la table de compatibilité
masegaloeh

@JohnMerlino: ne fonctionne pas dans IE9. Pour en savoir plus, consultez le lien de masegaloeh vers le tableau de compatibilité
Howie

Avertissement: la tabulation pour déplacer le focus vers le lien et l'utilisation de Entrée pour activer le lien fonctionneront toujours
wtho

Je ne pense pas que le curseur: la valeur par défaut est nécessaire. Tant que vous avez des événements de pointeur: aucun, cela semble fonctionner.
kloddant

51

Ce n'est pas trop facile à faire avec CSS, car ce n'est pas un langage comportemental (c'est-à-dire 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>

2
@Mike Celui-ci fait que le clic ne fait rien, mais le bouton semble toujours cliquable.
acostache

1
@acostache en utilisant style = "cursor: default;" devrait aider avec le pointeur
John

4
La question était: "utiliser CSS", c'est donc une bonne réponse, mais pas la bonne.
Roman Holzner

Il vaut mieux utiliser css plutôt que onclick = "return false" pour 3 raisons principales: 1- Avec css, vous pouvez changer le curseur par défaut de la souris sur le lien par défaut. 2- C'est js gênant. 3- Cela renvoie en fait une valeur, vous ne voulez pas retourner false à chaque fois que vous cliquez sur le lien.
Diego Unanue

11

Oui .. Il est possible d' utiliser le CSS

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

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

C'est la manière la plus propre, mais une mise en garde: elle n'est prise en charge que sur IE11 + caniuse.com
Pixelfreak

8

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>

1
-1 parce que c'est une manière assez compliquée / déroutante de résoudre le problème. Il ne fait pas non plus vraiment ce que la question demande (rendre le lien inactif). Il recouvre simplement le lien avec un élément invisible. La réponse de Diego est beaucoup plus claire.
développement du

@developering Je pense que la réponse de Diego est également meilleure et devrait être votée plus haut et acceptée. Cependant, lorsque j'ai écrit cette réponse (il y a 3 ans), je pointer-eventsn'avais presque pas de support de navigateur.
Paul

@Paulpro J'ai en quelque sorte pensé que c'était le cas. Désolé pour le vote négatif! Je veux juste vous assurer que la réponse la plus à jour est en tête. Merci pour la réponse.
développement du

6

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

Une manière plus discrète (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 à vous soucier du balisage, juste du JS.


4
Vous savez que vous pouvez facilement écrire du code non jQuery pour faire la même chose qui fonctionnerait un peu plus vite: document.getElementById('my-link').onclick = function(){ return false; };
Paul

1
Je pense que la plupart des gens veulent (et devraient) utiliser une sorte de cadre pour faciliter le développement. L'auteur n'a spécifié aucune restriction de performances, mais jQuery minifié et gzippé ne fait que 31 Ko. Je pense que les avantages l'emportent largement sur les coûts.
pixelfreak

2
Sérieusement? Quel navigateur ne prend pas en charge onclick ou getElementById. D'accord, donc IE 2 ne prend pas en charge onclick, mais il ne prend pas non plus en charge CSS ... et je doute fortement que votre code jQuery fonctionne dans IE 2 non plus.
Paul

1
La différence de vitesse peut être faible, mais pas si vous ne pouvez pas télécharger la bibliothèque jQuery. Je ne pense vraiment pas que ce soit une bonne idée d'encourager l'utilisation de jQuery lorsque vous n'en avez pas besoin, car les gens en deviennent dépendants et oublient comment écrire du Javascript sans lui.
Paul

4
@PaulPRO Cette discussion est sans intérêt sans les exigences de l'auteur. Chaque cadre a son but. S'il ne parle pas couramment JS et qu'il fait juste un site Web mom-n-pop et qu'il a besoin de manipuler un élément DOM, il lui serait beaucoup plus facile d'utiliser un framework. Votre réticence à utiliser n'importe quel cadre est ridicule. PHP est écrit en C. Cela signifie-t-il que vous devez écrire C et ne pas utiliser PHP? iOS a UIKit, Core Data, Quartz, etc. Flash a des tonnes de bibliothèques tierces couramment utilisées. Encore une fois, chaque cadre a son but. Une mentalité puriste et non intégrée n'aidera personne.
pixelfreak

2

La réponse est:

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

0

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

Lorsque vous dites à votre css de faire une action de survol sur ce "p" spécifique, dites-lui ceci:

(pour cet exemple, j'ai donné au "p" l'identifiant "exemple")

#example
{
  cursor:default;
}

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


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

Il n'est pas nécessaire d'ajouter une réponse séparée pour cela, votre commentaire sur la réponse de @KaranK suffit, pensé. Veuillez éviter les réponses en double.
MAChitgarha le
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.