Ist es möglich, ein HTML-Anchor-Tag mit CSS nicht anklickbar/verlinkbar zu machen?

Lesezeit: 5 Minuten

Benutzer-Avatar
Ryan

Wenn ich zum Beispiel das hier habe:

<a style="" href="https://stackoverflow.com/questions/6727659/page.html">page link</a>

Gibt es irgendetwas, das ich für das style-Attribut verwenden kann, das dafür sorgt, dass der Link nicht anklickbar ist und mich nicht zu page.html führt?

Oder ist meine einzige Möglichkeit, den „Seitenlink“ einfach nicht in ein Anker-Tag einzuschließen?

Bearbeiten: Ich möchte erklären, warum ich dies tun möchte, damit die Leute bessere Ratschläge geben können. Ich versuche, meine Anwendung so einzurichten, dass der Entwickler auswählen kann, welche Art von Navigationsstil er möchte.

Ich habe also eine Liste mit Links und einer ist immer aktuell ausgewählt und alle anderen nicht. Für die nicht ausgewählten Links möchte ich natürlich, dass es sich um normale anklickbare Anker-Tags handelt. Aber für den ausgewählten Link bevorzugen manche Leute, dass der Link anklickbar bleibt, während andere ihn nicht anklickbar machen möchten.

Jetzt könnte ich einfach programmgesteuert keine Anker-Tags um den ausgewählten Link wickeln. Aber ich denke, es wird eleganter sein, wenn ich den ausgewählten Link immer in etwas wie:

<a id="current" href="https://stackoverflow.com/questions/6727659/link.html">link</a>

und lassen Sie dann den Entwickler den Linkstil über CSS steuern.

  • stackoverflow.com/questions/2091168/disable-a-link-using-css

    – Brian

    18. Juli 2011 um 0:29 Uhr

  • Wenn Sie nicht möchten, dass darauf geklickt wird, verwenden Sie vielleicht a <span> stattdessen?

    – David Thomas

    18. Juli 2011 um 0:43 Uhr

  • Da muss ich David zustimmen. Brechen Sie keine UI-Paradigmen. Die Erwartung eines Benutzers ist, dass Links angeklickt werden können. Wenn es nicht angeklickt werden kann, dann ist es nicht wirklich ein Link, oder?

    – mrtsherman

    18. Juli 2011 um 18:24 Uhr

  • Weitere mögliche Antworten finden Sie unter stackoverflow.com/questions/2091168/disable-a-link-using-css.

    – Oliver

    12. Februar 2013 um 7:36 Uhr

  • Ja, das ist eine schreckliche Idee. Screenreader sehen den Link weiterhin als Link, da es sich um einen Link handelt. Auch Suchmaschinen. Eigentlich alles, was HTML versteht. Tu das nicht. Daran ist nichts “elegant”.

    – Paul D. Waite

    24. Juli 2013 um 13:06 Uhr


Benutzer-Avatar
Diego Unanue

Sie können dieses CSS verwenden:

.inactiveLink {
   pointer-events: none;
   cursor: default;
}

Und weisen Sie dann die Klasse Ihrem HTML-Code zu:

<a style="" href="https://stackoverflow.com/questions/6727659/page.html" class="inactiveLink">page link</a>

Es macht den Link nicht anklickbar und der Cursor sieht aus wie ein Pfeil, nicht wie die Links wie eine Hand.

oder verwenden Sie diesen Stil im HTML:

<a style="pointer-events: none; cursor: default;" href="https://stackoverflow.com/questions/6727659/page.html">page link</a>

aber ich schlage den ersten Ansatz vor.

  • Ich kann bestätigen, dass dies auf der Ubuntu-Version von Firefox/Chrome funktioniert. Ich frage mich jedoch, ob es unter IE unter Windows funktionieren wird.

    – JohnMerlino

    14. Juli 2014 um 5:08 Uhr

  • Der Schlüssel zu dieser Lösung ist: pointer-events. Hier der Link zur Kompatibilitätstabelle

    – Masegaloeh

    2. September 2014 um 8:09 Uhr

  • @JohnMerlino: funktioniert nicht in IE9. Weitere Informationen finden Sie unter Masegaloehs Link zur Kompatibilitätstabelle

    – Howi

    12. Januar 2015 um 12:57 Uhr


  • Vorbehalt: Das Tabulatoren, um den Fokus auf den Link zu verschieben, und das Verwenden der Eingabetaste, um den Link zu aktivieren, funktionieren weiterhin

    – ohne

    14. Februar 2019 um 16:51 Uhr

  • Ich glaube nicht, dass cursor: default notwendig ist. Solange Sie pointer-events:none haben, scheint das zu funktionieren.

    – kloddant

    13. Dezember 2019 um 17:57 Uhr

Benutzer-Avatar
Karan K

Das ist mit CSS nicht so einfach, da es keine Verhaltenssprache ist (dh JavaScript). Der einzige einfache Weg wäre, ein JavaScript-OnClick-Ereignis für Ihren Anker zu verwenden und es als falsch zurückzugeben. Dies ist wahrscheinlich der kürzeste Code du könntest dafür verwenden:

<a href="https://stackoverflow.com/questions/6727659/page.html" onclick="return false">page link</a>

  • @Mike Dieser bewirkt, dass der Klick nichts bewirkt, aber die Schaltfläche sieht immer noch anklickbar aus.

    – Akostache

    31. Januar 2013 um 10:59 Uhr

  • @acostache mit style=”cursor:default;” sollte mit dem Zeiger helfen

    – John

    24. Juli 2013 um 13:00 Uhr


  • Die Frage war: “CSS verwenden”, das ist also eine gute, aber nicht die richtige Antwort.

    – Roman Holzner

    19. März 2014 um 13:30 Uhr

  • Aus drei Hauptgründen ist es besser, css statt onclick=”return false” zu verwenden: 1- Mit css können Sie den standardmäßigen Link-Mauszeiger in den standardmäßigen Pfeil ändern. 2- Das ist aufdringlich js. 3- Das gibt eigentlich einen Wert zurück, Sie wollen nicht jedes Mal falsch zurückgeben, wenn Sie auf den Link klicken.

    – Diego Unanue

    5. Juni 2014 um 15:33 Uhr

Ja.. Es ist möglich verwenden css

<a class="disable-me" href="https://stackoverflow.com/questions/6727659/page.html">page link</a>

.disable-me {
    pointer-events: none;
}

  • Dies ist der sauberste Weg, aber eine Einschränkung: Er wird nur von IE11+ unterstützt caniuse.com

    – Pixelfreak

    19. Januar 2015 um 19:59 Uhr

Oder reines HTML und CSS ohne Ereignisse:

<div style="z-index: 1; position: absolute;">
    <a style="visibility: hidden;">Page link</a>
</div>
<a href="https://stackoverflow.com/questions/6727659/page.html">Page link</a>

CSS wurde entwickelt, um die Darstellung zu beeinflussen, nicht das Verhalten.

Sie könnten etwas JavaScript verwenden.

document.links[0].onclick = function(event) {
   event.preventDefault();
};

Benutzer-Avatar
Pixelfreak

Ein unauffälligerer Weg (vorausgesetzt, Sie verwenden jQuery):

HTML:

<a id="my-link" href="https://stackoverflow.com/questions/6727659/page.html">page link</a>

Javascript:

$('#my-link').click(function(e)
{
    e.preventDefault();
});

Der Vorteil dabei ist die saubere Trennung zwischen Logik und Darstellung. Wenn Sie eines Tages entscheiden, dass dieser Link etwas anderes tun würde, müssen Sie nicht mit dem Markup herumspielen, sondern nur mit dem JS.

Benutzer-Avatar
Doa

Die Antwort ist:

<a href="https://stackoverflow.com/questions/6727659/page.html" onclick="return false">page link</a>

1333780cookie-checkIst es möglich, ein HTML-Anchor-Tag mit CSS nicht anklickbar/verlinkbar zu machen?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy