Wie kann man die Links auf der aktuellen Seite nur mit CSS deaktivieren

Wenn Sie Links auf der aktuellen Seite deaktivieren möchten, lesen Sie einfach diesen Kapitel und versuchen Sie es selbst.

Die Idee ist die folgende - haben Sie keine Links zu der gleichen Seite, auf der Sie sich befinden. Es ist, wenn Sie einen Link sehen, aber nichts tun, wenn Sie darauf klicken, weil es Sie zur gleichen Seite bringt, auf der Sie sich befinden.

Sie können einen Link deaktivieren, indem Sie die Eigenschaft pointer-events verwenden, die angibt, ob das Element auf der Seite beim Anklicken von Elementen reagieren muss oder nicht.

Sehen Sie sich den folgenden Code, der die Verwendung der Eigenschaftpointer-events, wo das Tag <a> mit der Eigenschaft cursor auf "default" eingestellt ist, an:

Beispiel

<!DOCTYPE html> 
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      .disabled { 
      pointer-events: none; 
      cursor: default; 
      } 
    </style>
  </head>
  <body>
    <h2>Link auf der aktuellen Seite deaktivieren</h2>
    <a href="https://www.w3docs.com/" class="disabled">Hier Klicken</a> 
  </body>
</html>

Obwohl es wie ein Link aussieht, passiert nichts, wenn wir darauf klicken wollen.

In diesem Beispiel werden die Eigenschaften text-decoration und color auf das Tag ‘a’ angewendet, so dass es aussieht, als wäre ein Link deaktiviert:

Beispiel

<!DOCTYPE html> 
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      .disabled { 
      pointer-events: none; 
      cursor: default; 
      text-decoration: none; 
      color: #000000; 
      } 
    </style>
  </head>
  <body>
    <h2>Link auf der aktuellen Seite deaktivieren</h2>
    <a href="https://www.w3docs.com/" class="disabled">Hier Klicken</a> 
  </body>
</html>

Sie können auch einen Link auf der aktuellen Seite deaktivieren, indem Sie die Eigenschaft user-select auf none setzen.

Ein Beispiel, das den Unterschied zwischen deaktivierten und aktiven Links anzeigt:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>Link auf der aktuellen Seite deaktivieren</h2>
    <a href="https://www.w3docs.com/" disabled="disabled" class="button">Disabled</a>
    <a href="https://www.w3docs.com/" class="button">Hier Klicken</a>
  </body>
</html>