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

Ich habe eine Klasse namens current-pageund möchte, dass Links zu dieser Klasse deaktiviert werden, damit beim Klicken keine Aktion ausgeführt wird.

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>

Informationen zur Browserunterstützung finden Sie unter https://caniuse.com/#feat=pointer-events . Wenn Sie IE unterstützen müssen, gibt es eine Problemumgehung. siehe diese Antwort .

Warnung: Die Verwendung pointer-eventsin CSS für Nicht-SVG-Elemente ist experimentell. Die Funktion war früher Teil des Entwurfs der CSS3-Benutzeroberfläche, wurde jedoch aufgrund vieler offener Probleme auf CSS4 verschoben.

CSS kann nur verwendet werden, um den Stil von etwas zu ändern. Das Beste, was Sie mit reinem CSS wahrscheinlich tun können, ist, den Link vollständig auszublenden.

Was Sie wirklich brauchen, ist etwas Javascript. So können Sie mithilfe der jQuery-Bibliothek das tun, was Sie möchten.

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

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

• Fügen Sie das hrefAttribut nicht in Ihre <a>Tags ein.
• Verwenden Sie JavaScript, um die Ankerelemente damit zu finden class, und entfernen Sie deren hrefoder onclickAttribute entsprechend. jQuery würde Ihnen dabei helfen (NickF hat gezeigt, wie man etwas Ähnliches, aber Besseres macht).

Bootstrap Disabled 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 ein Link

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

Sie können das hrefAttribut auf setzenjavascript:void(0)

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

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

Ich benutzte:

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

Und war nicht genug; In einigen Browsern wird der Link weiterhin angezeigt und blinkt.

Ich musste hinzufügen:

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

Wenn Sie sich in einem Formular nur an HTML / CSS halten möchten, können Sie auch eine Schaltfläche verwenden. Gestalte es und setze das disabledAttribut.

ZB http://jsfiddle.net/cFTxH/1/

Wenn Sie möchten, dass es sich nur um CSS handelt, sollte die Deaktivierungslogik durch CSS definiert werden.

Um die Logik in den CSS-Definitionen zu verschieben, müssen Sie Attributselektoren verwenden. Hier sind einige Beispiele :

Deaktivieren Sie einen Link mit einer genauen href: =

Sie können Links deaktivieren, die einen bestimmten href-Wert enthalten, wie folgt:

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

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

Deaktivieren Sie einen Link, der einen Pfad enthält: *=

Hier wird jeder Link /keyword/im Pfad deaktiviert

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

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

Deaktivieren Sie einen Link, der beginnt mit: ^=

Der [attribute^=value]Operator zielt auf ein Attribut ab, das mit einem bestimmten Wert beginnt. Ermöglicht das Verwerfen von Websites und Stammpfaden.

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

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

Sie können es sogar verwenden, um Nicht-https-Links zu deaktivieren. Beispielsweise :

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

Deaktivieren Sie einen Link, der endet mit: $=

Der [attribute$=value]Operator zielt auf ein Attribut ab, das mit einem bestimmten Wert endet. Es kann nützlich sein, Dateierweiterungen zu verwerfen.

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

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

Oder irgendein anderes Attribut

CSS kann auf jedes HTML-Attribut abzielen. Könnte sein rel, target, data-customund so weiter ...

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

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

Attributselektoren kombinieren

Sie können mehrere Regeln verketten. Angenommen, Sie möchten jeden externen Link deaktivieren, nicht jedoch diejenigen, die auf Ihre Website verweisen:

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

Oder deaktivieren Sie Links zu PDF-Dateien einer bestimmten Website:

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

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

Browser-Unterstützung

Attributselektoren werden seit IE7 unterstützt. :not()Selektor seit IE9.

Eine Möglichkeit, dies mit CSS zu tun, besteht darin, ein CSS für eine Umhüllung festzulegen div, die so eingestellt ist, dass sie verschwindet und etwas anderes an ihre Stelle tritt.

Z.B:

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

Mit einem CSS wie

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

Um das auszuschalten a, müssen Sie das Klickereignis oder href, wie von anderen beschrieben , ersetzen .

PS: Nur um zu verdeutlichen, würde ich dies als eine ziemlich unordentliche Lösung betrachten, und für SEO ist es auch nicht die beste, aber ich glaube, es ist die beste mit reinem CSS.

Versuche dies:

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

Mit der Eigenschaft Zeigerereignisse können Sie steuern, wie HTML-Elemente auf Maus- / Berührungsereignisse reagieren - einschließlich CSS-Hover- / Aktivstatus, Klick- / Tippereignisse in Javascript und ob der Cursor sichtbar ist oder nicht.

Dies ist nicht die einzige Möglichkeit , einen Link zu deaktivieren , sondern eine gute CSS-Methode, die in IE10 + und allen neuen Browsern funktioniert:

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

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

Ich suchte Internet über und fand nicht besser als diese . Um die Funktion zum Klicken auf Schaltflächen zu deaktivieren, fügen Sie einfach den CSS-Stil mit jQuery wie folgt hinzu:

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

Führen Sie dies dann aus, um es erneut zu aktivieren

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

Auf Firefox und IE 11 überprüft, hat es funktioniert.

Sie können diese CSS verwenden:

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>

Dank all derer, die Lösungen veröffentlicht haben, habe ich mehrere Ansätze kombiniert, um erweiterte disabledFunktionen bereitzustellen . Hier ist ein Kern , und der Code ist unten.

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()

Hier ist die Coffescript-Klasse:

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

Sie können auch ein anderes Element so dimensionieren, dass es die Links abdeckt (mithilfe des rechten Z-Index): Dadurch werden die Klicks "aufgefressen".

(Wir haben dies zufällig entdeckt, weil wir ein Problem mit plötzlich inaktiven Links hatten, weil das "reaktionsschnelle" Design dazu führte, dass ein H2 sie abdeckte, wenn das Browserfenster eine mobile Größe hatte.)

Demo hier
Probieren Sie diese aus

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

Ein weiterer Trick besteht darin, ein unsichtbares Element darüber zu platzieren. Dadurch werden auch alle Hover-Effekte deaktiviert

.myButton{
    position: absolute;
    display: none;
}

.myButton::after{ 
    position: absolute;
    content:"";
    height:100%;
    width:100%;
    top:0;
    left:0;
}

Es ist möglich, dies in CSS zu tun

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

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

Siehe unter:

Bitte beachten Sie, dass das text-decoration: none;und color: black;nicht benötigt wird, der Link jedoch eher wie einfacher Text aussieht.

pointer-events:none wird den Link deaktivieren:

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