Frage Wie kann ich einen Link nur mit CSS deaktivieren?


Gibt es eine Möglichkeit, einen Link mit CSS zu deaktivieren?

Ich habe eine Klasse namens current-page und möchten, dass Links mit dieser Klasse deaktiviert werden, sodass beim Klicken keine Aktion ausgeführt wird.


749
2018-01-19 04:55


Ursprung


Antworten:


Die Antwort ist bereits in den Kommentaren der Frage. Für mehr Sichtbarkeit kopiere ich diese Lösung Hier:

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

Für die Browserunterstützung, siehe bitte https://caniuse.com/#feat=pointer-events. Wenn Sie IE unterstützen müssen, gibt es eine Problemumgehung; sehen diese Antwort.

Warnung: Die Verwendung von pointer-events in CSS für Nicht-SVG-Elemente ist experimentell. Die Funktion war früher Teil der CSS3-UI-Entwurfsspezifikation, wurde aber aufgrund vieler offener Probleme auf CSS4 verschoben.


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 kann nur verwendet werden, um den Stil von etwas zu ändern. Das Beste, was Sie mit reinem CSS tun könnten, ist, den Link vollständig zu verbergen.

Was Sie wirklich brauchen, ist ein wenig Javascript. So würden Sie mit der jQuery-Bibliothek machen, was Sie wollen.

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

118
2018-01-19 05:00



CSS kann das nicht machen. CSS dient nur zur Präsentation. Ihre Optionen sind:

  • Enthalten Sie nicht die href Attribut in Ihrem <a> Stichworte.
  • Verwenden Sie JavaScript, um die Ankerelemente damit zu finden classund entferne ihre href oder onclick Attribute entsprechend. jQuery würde dir dabei helfen (NickF hat gezeigt, wie man etwas Ähnliches macht, aber besser).

32
2018-04-10 05:53



Deaktivierter Bootstrap-Link

<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 Disabled Button, aber es sieht aus wie Link

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

28
2018-01-19 05:01



Sie können einstellen href zuschreiben javascript:void(0)

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


18
2017-12-27 18:00



Wenn Sie nur HTML / CSS in einem Formular beibehalten möchten, können Sie auch eine Schaltfläche verwenden. Style es und setze das disabled Attribut.

Z.B. http://jsfiddle.net/cFTxH/1/


10
2018-01-19 05:18