Comment Désactiver les Liens sur la Page Actuelle en Utilisant Uniquement CSS

Si vous voulez désactiver les liens sur la page actuelle, lisez simplement ce snippet et essayez-vous-même.

L'idée est la suivante - ne pas avoir les liens sur la même page sur laquelle vous vous situez. Cela est quand vous voyez un lien mais il ne fait rien lors qu'il est cliqué car cela va vous guider à la même page sur laquelle il est placé.

Vous pouvez désactiver le lien en utilisant la propriété pointer-events qui spécifie si l'élément sur la page va répondre ou non lorsqu'il est cliqué.

Voyons le code suivant qui montre l'utilisation de pointer-events où la balise <a> est désactivée avec la propriété cursor définie à "default":

1. Créez HTML

  • Créez une balise d'ancrage avec une classe "disabled".
<h2>Désactivez le lien sur la page actuelle</h2>
<a href="https://www.w3docs.com/" class="disabled">Cliquez Ici</a>

2. Créez CSS

  • Définissez pointer-events à "none" pour que l'élément ne jamais réagisse à la propriété pointer-events.
  • Définissez cursor à "default" pour désactiver la balise d'ancrage.
.disabled {
  pointer-events: none;
  cursor: default;
}

Voici l'exemple complet:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .disabled {
        pointer-events: none;
        cursor: default;
      }
    </style>
  </head>
  <body>
    <h2>Désactiver le lien sur la page actuelle</h2>
    <a href="https://fr.w3docs.com/" class="disabled">Cliquez ici</a>
  </body>
</html>

Comme vous le voyez, bien que cela ressemble à un lien, rien n'occure quand on veut cliquer.

Dans cet exemple, les ppropriétés text-decoration et color sont appliquées à la balise ‘a’ pour qu'il ressemble que le lien est désactivé:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .disabled {
        pointer-events: none;
        cursor: default;
        text-decoration: none;
        color: #000000;
      }
    </style>
  </head>
  <body>
    <h2>Désactiver le lien sur la page actuelle</h2>
    <a href="https://fr.w3docs.com/" class="disabled">Cliquez ici</a>
  </body>
</html>

Vous pouvez également désactiver un lien sur la page actuelle en définissant la propriété user-select à "none".

Voyons un exemple qui montre la différence entre les liens désactivés et les liens actives:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      a.button,
      button {
        display: inline-block;
        padding: 20px 55px;
        margin: 20px 10px;
        line-height: 18px;
        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;
        border: 0;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        background-color: #8ebf42;
        text-decoration: none;
        color: #ffffff;
      }
      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: #cccccc;
        color: #2a2a2a;
        outline: 0;
      }
    </style>
  </head>
  <body>
    <h2>Désactiver le lien sur la page actuelle</h2>
    <a href="https://fr.w3docs.com/" disabled="disabled" class="button">Désactivé</a>
    <a href="https://fr.w3docs.com/" class="button">Cliquez ici</a>
  </body>
</html>