Question Comment désactiver un lien en utilisant uniquement CSS?


Est-il possible de désactiver un lien en utilisant CSS?

J'ai une classe appelée current-page et souhaitez que les liens avec cette classe soient désactivés afin qu'aucune action ne se produise lorsqu'ils sont cliqués.


749
2018-01-19 04:55


origine


Réponses:


La réponse est déjà dans les commentaires de la question. Pour plus de visibilité, je copie cette solution ici:

.not-active {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: black;
}
<a href="link.html" class="not-active">Link</a>

Pour le support du navigateur, s'il vous plaît voir https://caniuse.com/#feat=pointer-events. Si vous avez besoin de prendre en charge IE, il existe une solution de contournement; voir cette réponse.

Attention: L'utilisation de pointer-events en CSS pour les éléments non-SVG est expérimental. Cette fonctionnalité faisait partie de la spécification de l'interface utilisateur CSS3 mais, en raison de nombreux problèmes en suspens, elle a été reportée à CSS4.


1211
2017-10-04 06:05



.disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.6;
}
<a href="#" class="disabled">link</a>


119
2018-01-19 05:01



CSS ne peut être utilisé que pour changer le style de quelque chose. Le mieux que vous puissiez probablement faire avec du CSS pur est de cacher complètement le lien.

Ce dont vous avez vraiment besoin, c'est d'un javascript. Voici comment vous feriez ce que vous voulez en utilisant la bibliothèque jQuery.

$('a.current-page').click(function() { return false; });

118
2018-01-19 05:00



CSS ne peut pas faire ça. CSS est pour la présentation seulement. Vos options sont:

  • Ne pas inclure le href attribuer dans votre <a> Mots clés.
  • Utilisez JavaScript pour trouver les éléments d'ancrage avec classet supprimez leur href ou onclick attributs en conséquence. jQuery pourrait vous aider avec cela (NickF a montré comment faire quelque chose de similaire mais mieux).

32
2018-04-10 05:53



Bootstrap désactivé Lien

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>

<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

Bootstrap désactivé Bouton mais il ressemble à un lien

<button type="button" class="btn btn-link">Link</button>

28
2018-01-19 05:01



Vous pouvez définir href attribuer à javascript:void(0)

.disabled {
  /* Disabled link style */
  color: black;
}
<a class="disabled" href="javascript:void(0)">LINK</a>


18
2017-12-27 18:00



Si vous voulez coller seulement au HTML / CSS sur un formulaire, une autre option est d'utiliser un bouton. Style et définissez le disabled attribut.

Par exemple. http://jsfiddle.net/cFTxH/1/


10
2018-01-19 05:18



La seule façon de le faire sans CSS serait de définir un CSS sur un div qui fait disparaître votre a et quelque chose d'autre prend sa place.

PAR EXEMPLE:

<div class="disabled">
    <a class="toggleLink" href="wherever">blah</a>
    <span class="toggleLink">blah</span
</div>

Avec un CSS comme

.disabled a.toggleLink { display: none; }
span.toggleLink { display: none; }
.disabled span.toggleLink { display: inline; }

Pour désactiver réellement le A, vous devrez remplacer son événement click ou href, comme décrit par d'autres.

PS: Juste pour clarifier, je considérerais que c'est une solution plutôt désordonnée, et pour le référencement, ce n'est pas le meilleur non plus, mais je crois que c'est le meilleur avec purement CSS.


10
2017-09-26 05:05