.disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.6;
}

<a href="#" class="disabled">link</a>

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

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

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

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

• N'incluez pas l'attribut href dans vos balises <a>.
• Utilisez JavaScript, pour trouver les éléments d'ancrage avec ce class, et supprimer leurs href ou onclick attributs en conséquence. jQuery vous aiderait avec cela (NickF a montré comment faire quelque chose de similaire mais mieux).

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>

Bouton Bootstrap désactivé mais il ressemble à link

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

, Vous pouvez définir href attribut javascript:void(0)

.disabled {
  /* Disabled link style */
  color: black;
}

<a class="disabled" href="javascript:void(0)">LINK</a>

Si vous voulez vous en tenir à HTML / CSS sur un formulaire, une autre option consiste à utiliser un bouton. Stylez-le et définissez l'attribut disabled.

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

La seule façon de le faire sans CSS serait de définir un CSS sur un div d'emballage qui a fait disparaître votre A et que quelque chose d'autre prenne 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 cela comme une solution assez 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.

Essayez ceci:

<style>
.btn-disable {
    display:inline-block;
    pointer-events: none;       
}
</style>

Si vous voulez que ce soit uniquement CSS, la logique de désactivation doit être définie par CSS.

Pour déplacer la logique dans les définitions CSS, vous devrez utiliser des sélecteurs d'attributs. Voici quelques exemples :

Désactiver le lien qui a un href exact: =

Vous pouvez choisir de désactiver les liens qui contiennent une valeur href spécifique comme ceci:

<a href="//website.com/exact/path">Exact path</a>

[href="//website.com/exact/path"]{
  pointer-events: none;
}

Désactiver un lien qui contient un morceau de chemin: *=

Ici, tout lien contenant /keyword/ dans path sera désactivé

<a href="//website.com/keyword/in/path">Contains in path</a>

[href*="/keyword/"]{
  pointer-events: none;
}

Désactiver un lien qui commence par: ^=

L'opérateur [attribute^=value] cible un attribut qui commence par une valeur spécifique. Vous permet d'ignorer les sites Web et les chemins racine.

<a href="//website.com/begins/with/path">Begins with path</a>

[href^="//website.com/begins/with"]{
  pointer-events: none;
}

, Vous pouvez même l'utiliser pour désactiver les liens en https. Par exemple:

a:not([href^="https://"]){
  pointer-events: none;
}

Désactiver un lien qui se termine par: $=

L'opérateur [attribute$=value] cible un attribut qui se termine par une valeur spécifique. Il peut être utile de supprimer les extensions de fichiers.

<a href="/path/to/file.pdf">Link to pdf</a>

[href$=".pdf"]{
  pointer-events: none;
}

Ou tout autre attribut

Css peut cibler n'importe quel attribut HTML. Pourrait être rel, target, data-customet ainsi de suite...

<a href="#" target="_blank">Blank link</a>

[target=_blank]{
  pointer-events: none;
}

Combinaison de sélecteurs d'attributs

, Vous pouvez enchaîner plusieurs règles. Disons que vous voulez désactiver tous les liens externes, mais pas ceux qui pointent vers votre site Web:

a[href*="//"]:not([href*="my-website.com"]) {
    pointer-events: none;
}

Ou désactiver les liens vers les fichiers pdf d'un site Web spécifique:

<a href="//website.com/path/to/file.jpg">Link to image</a>

[href^="//website.com"][href$=".jpg"] {
  color: red;
}

Prise en charge du Navigateur

Les sélecteurs D'attributs sont pris en charge depuis IE7. :not() sélecteur depuis IE9.

Le pointeur-événements propriété permet de contrôler la façon dont les éléments HTML répondre aux événements souris / tactile-y compris CSS hover / états actifs, cliquez / appuyez sur événements en Javascript, et si oui ou non le curseur est visible.

C'est Pas la seule façon de désactiver un lien , mais une bonne manière CSS qui fonctionne dans IE10+ et tous les nouveaux navigateurs:

.current-page {
  pointer-events: none;
  color: grey;
}

<a href="#" class="current-page">This link is disabled</a>

J'ai cherché sur internet et trouvé rien de mieux que ce. Fondamentalement, pour désactiver la fonctionnalité de clic de bouton, ajoutez simplement le style CSS en utilisant jQuery comme ceci:

$("#myLink").css({ 'pointer-events': 'none' });

Ensuite, pour l'activer à nouveau, faites ceci

$("#myLink").css({ 'pointer-events': '' });

Vérifié sur Firefox et IE 11, cela a fonctionné.

Merci à tous ceux qui ont posté des solutions, j'ai combiné plusieurs approches pour fournir des fonctionnalités disabled plus avancées. Voici l'essentiel, et le code est ci-dessous.

This provides for multiple levels of defense so that Anchors marked as disable actually behave as such.
Using this approach, you get an anchor that you cannot:
  - click
  - tab to and hit return
  - tabbing to it will move focus to the next focusable element
  - it is aware if the anchor is subsequently enabled


1.  Include this css, as it is the first line of defense.  This assumes the selector you use is 'a.disabled'
    a.disabled {
      pointer-events: none;
      cursor: default;
    }

 2. Next, instantiate this class such as (with optional selector):
    $ ->
      new AnchorDisabler()

Voici la classe coffescript:

class AnchorDisabler
  constructor: (selector = 'a.disabled') ->
    $(selector).click(@onClick).keyup(@onKeyup).focus(@onFocus)

  isStillDisabled: (ev) =>
    ### since disabled can be a class or an attribute, and it can be dynamically removed, always recheck on a watched event ###
    target = $(ev.target)
    return true if target.hasClass('disabled')
    return true if target.attr('disabled') is 'disabled'
    return false

  onFocus: (ev) =>
    ### if an attempt is made to focus on a disabled element, just move it along to the next focusable one. ###
    return unless @isStillDisabled(ev)

    focusables = $(':focusable')
    return unless focusables

    current = focusables.index(ev.target)
    next = (if focusables.eq(current + 1).length then focusables.eq(current + 1) else focusables.eq(0))

    next.focus() if next


  onClick: (ev) =>
    # disabled could be dynamically removed
    return unless @isStillDisabled(ev)

    ev.preventDefault()
    return false

  onKeyup: (ev) =>

    # 13 is the js key code for Enter, we are only interested in disabling that so get out fast
    code = ev.keyCode or ev.which
    return unless code is 13

    # disabled could be dynamically removed
    return unless @isStillDisabled(ev)

    ev.preventDefault()
    return false

Vous pouvez utiliser ce css:

a.button,button {
    display: inline-block;
    padding: 6px 15px;
    margin: 5px;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 4px;
    -moz-box-shadow: inset 0 3px 20px 0 #cdcdcd;
    -webkit-box-shadow: inset 0 3px 20px 0 #cdcdcd;
    box-shadow: inset 0 3px 20px 0 #cdcdcd;
}

a[disabled].button,button[disabled] {
    cursor: not-allowed;
    opacity: 0.4;
    pointer-events: none;
    -webkit-touch-callout: none;
}

a.button:active:not([disabled]),button:active:not([disabled]) {
    background-color: transparent !important;
    color: #2a2a2a !important;
    outline: 0;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .5);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .5);
}

<button disabled="disabled">disabled!</button>
<button>click me!</button>
<a href="http://royansoft.com" disabled="disabled" class="button">test</a>
<a href="http://royansoft.com" class="button">test2</a>

Démo ici
Essayez celui-ci

$('html').on('click', 'a.Link', function(event){
    event.preventDefault();
});

Vous pouvez également dimensionner un autre élément pour qu'il couvre les liens (en utilisant le bon index z): cela va "manger" les clics.

(nous avons découvert cela par accident parce que nous avons eu un problème avec des liens soudainement inactifs en raison de la conception "réactive" provoquant un H2 pour les couvrir lorsque la fenêtre du navigateur était de taille mobile.)

J'ai utilisé:

.current-page a:hover {
pointer-events: none !important;
}

Et n'était pas suffisant; dans certains navigateurs, il affichait toujours le lien, clignotant.

J'ai dû ajouter:

.current-page a {
cursor: text !important;
}

Il est possible de le faire en CSS

.disabled{
  cursor:default;
  pointer-events:none;
  text-decoration:none;
  color:black;
}

<a href="https://www.google.com" target="_blank" class="disabled">Google</a>

Voir à:

Veuillez noter que les text-decoration: none; et color: black; ne sont pas nécessaires mais que le lien ressemble davantage à du texte brut.

pointer-events:none désactivera le lien:

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

<a href="#!">1) Link With Non-directed url</a><br><br>

<a href="#!" disabled >2) Link With with disable url</a><br><br>