it-swarm.com.de

Wie kann ich einen Link nur mit CSS deaktivieren?

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

Ich habe eine Klasse namens current-page und möchte, dass Verknüpfungen mit dieser Klasse deaktiviert werden, sodass beim Klicken auf sie keine Aktion ausgeführt wird.

785
RSK

Die Antwort ist bereits in den Kommentaren der Frage enthalten. 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 von pointer-events in CSS für Nicht-SVG-Elemente ist experimentell. Das Feature war früher Bestandteil der CSS3-UI-Entwurfsspezifikation, wurde jedoch aufgrund vieler offener Probleme auf CSS4 verschoben.

1271
RSK

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

127
amir

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

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

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

CSS kann das nicht. CSS dient nur zur Darstellung. Ihre Optionen sind:

  • Fügen Sie das href-Attribut nicht in Ihre <a>-Tags ein.
  • Verwenden Sie JavaScript, um die Ankerelemente mit dieser class zu finden, und entfernen Sie die entsprechenden href- oder onclick-Attribute. jQuery würde Ihnen dabei helfen (NickF zeigte, wie man etwas ähnliches macht, aber besser).
32
Kevin Conner

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 link

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

Sie können das href Attribut auf javascript:void(0) setzen.

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

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

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

10

Sie können dies ohne CSS nur tun, wenn Sie ein CSS für ein Wrapping-Div festlegen, durch das ein a verschwunden ist und etwas anderes seinen Platz einnimmt.

Z.B:

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

Mit einem CSS gefällt

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

Um das A tatsächlich auszuschalten, müssen Sie das Click-Event oder das href wie von anderen beschrieben ersetzen.

PS: Nur um zu klären, würde ich dies für eine ziemlich unordentliche Lösung halten, und für SEO ist es auch nicht die beste, aber ich glaube, es ist die beste Lösung für rein CSS.

10
fyjham

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

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

Deaktivieren Sie den Link, der eine genaue href hat: =

Sie können auswählen, dass Links deaktiviert werden, die einen bestimmten href-Wert enthalten.

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

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

Deaktivieren Sie einen Link, der ein Stück Pfad enthält: *=

Jeder Link, der /keyword/in dem Pfad enthält, wird deaktiviert

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

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

Deaktivieren Sie einen Link, der mit folgendem beginnt: ^=

der Operator [attribute^=value] zielt auf ein Attribut, 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. Zum Beispiel :

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

Deaktivieren Sie einen Link, der endet mit: $=

Der [attribute$=value]-Operator zielt auf ein Attribut, 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 beliebige HTML-Attribute abzielen. Könnte rel, target, data-customund so weiter sein ...

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

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

Attributselektoren kombinieren

Sie können mehrere Regeln verketten. Nehmen wir an, Sie möchten jeden externen Link deaktivieren, jedoch nicht 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() Selector seit IE9.

9
Creaforge

Versuche dies:

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

Die Eigenschaft pointer-events ermöglicht die Kontrolle darüber, wie HTML-Elemente auf Maus-/Berührungsereignisse reagieren - einschließlich CSS-Hover-/Aktivzuständen, Klicken Sie in Javascript auf Ereignisse, und geben Sie an, ob der Cursor auf .__ steht. sichtbar.

Das ist nicht die einzige Möglichkeit, wie Sie einen Link deaktivieren, aber 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>

7
Alireza

Ich habe über das Internet gesucht und nichts Besseres gefunden als this . Um die Klick-Funktion zu deaktivieren, fügen Sie einfach den CSS-Stil mit jQuery hinzu:

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

Dann machen Sie es wieder, um es wieder zu aktivieren

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

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

5
Faisal Mq

Vielen Dank an alle, die Lösungen gepostet haben. Ich habe mehrere Ansätze kombiniert, um erweiterte Funktionen für disabled bereitzustellen. Hier ist ein Gist , 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
3
kross

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>

3
javad shariaty

Demo hier
Probier diese

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

Ich benutzte:

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

Und war nicht genug; In einigen Browsern wurde der Link immer noch blinkend angezeigt.

Ich musste hinzufügen:

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

Sie können auch ein anderes Element so bemessen, 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 Design "responsive" war, was dazu führte, dass ein H2 sie abdeckte, wenn das Browserfenster eine mobile Größe hatte.)

1

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

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

0
Rudra

Es ist möglich, es in CSS zu machen

.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 die Codes text-decoration: none; und color: black; nicht benötigt werden, der Link jedoch eher als Text erscheint.

0
user8903269

pointer-events:none wird den Link deaktivieren:

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