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

132

Zum Beispiel, wenn ich das habe:

<a style="" href="page.html">page link</a>

Gibt es irgendetwas, das ich für das Stilattribut verwenden kann, damit der Link nicht anklickbar ist und mich nicht zu page.html führt?

Oder ist meine einzige Option, 'Seitenlink' einfach nicht in ein Ankertag zu verpacken?

Bearbeiten: Ich möchte angeben, warum ich dies tun möchte, damit die Leute möglicherweise 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 Links, die nicht ausgewählt sind, möchte ich natürlich, dass diese normale anklickbare Ankertags sind. Für den ausgewählten Link bevorzugen einige Benutzer jedoch, dass der Link anklickbar bleibt, während andere ihn nicht anklickbar machen möchten.

Jetzt konnte ich einfach programmgesteuert keine Ankertags um den ausgewählten Link wickeln. Aber ich denke, es wird eleganter, wenn ich den ausgewählten Link immer in etwas einwickeln kann wie:

<a id="current" href="link.html">link</a>

Lassen Sie dann den Entwickler den Verknüpfungsstil über CSS steuern.

Ryan
quelle
3
Wenn Sie nicht möchten, dass darauf geklickt wird, verwenden Sie <span>stattdessen möglicherweise ein ?
David sagt, Monica
Ich würde David zustimmen müssen. Brechen Sie keine UI-Paradigmen. Die Erwartung eines Benutzers ist, dass auf Links geklickt werden kann. Wenn es nicht angeklickt werden kann, ist es nicht wirklich ein Link, oder?
Mrtsherman
Weitere mögliche Antworten finden Sie unter stackoverflow.com/questions/2091168/disable-a-link-using-css .
Oliver
Ja, das ist eine schreckliche Idee. Bildschirmleser sehen den Link weiterhin als Link, da es sich um einen Link handelt. Suchmaschinen auch. In der Tat alles, was HTML versteht. Tu das nicht. Daran ist nichts "Elegantes".
Paul D. Waite

Antworten:

267

Sie können dieses CSS verwenden:

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

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

<a style="" href="page.html" class="inactiveLink">page link</a>

Dadurch ist der Link nicht anklickbar und der Cursorstil ein Pfeil, keine Hand wie die Links.

oder verwenden Sie diesen Stil im HTML:

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

aber ich schlage den ersten Ansatz vor.

Diego Unanue
quelle
Ich kann bestätigen, dass dies unter Ubuntu-Version von Firefox / Chrome funktioniert. Ich frage mich, ob es unter Windows unter IE funktionieren wird.
John Merlino
3
Der Schlüssel in dieser Lösung ist : pointer-events. Hier der Link zur Kompatibilitätstabelle
masegaloeh
@ JohnMerlino: funktioniert nicht in IE9. Weitere Informationen finden Sie unter Masegaloehs Link zur Kompatibilitätstabelle
Howie
Vorsichtsmaßnahme: Tabulatoren, um den Fokus auf den Link zu verschieben, und die Verwendung der Eingabetaste, um den Link zu aktivieren, funktionieren weiterhin
bis zum
Ich denke nicht, Cursor: Standard ist notwendig. Solange Sie Zeigerereignisse haben: keine, scheint das zu funktionieren.
Kloddant
51

Mit CSS ist das nicht allzu einfach, da es sich nicht um eine Verhaltenssprache (dh JavaScript) handelt. Die einzige einfache Möglichkeit besteht darin, ein JavaScript OnClick-Ereignis für Ihren Anker zu verwenden und es als falsch zurückzugeben. Dies ist wahrscheinlich der kürzeste Code Sie könnten dafür verwenden:

<a href="page.html" onclick="return false">page link</a>
Karan K.
quelle
2
@Mike Dieser macht den Klick nichts, aber die Schaltfläche sieht immer noch anklickbar aus.
Acostache
1
@acostache using style = "cursor: default;" sollte mit dem Zeiger helfen
John
4
Die Frage war: "Verwenden von CSS", dies ist also eine gute, aber nicht die richtige Antwort.
Roman Holzner
Es ist aus drei Hauptgründen besser, CSS zu verwenden, als onclick = "return false": 1- Mit CSS können Sie den Standard-Link-Mauszeiger auf den Standardpfeil ändern. 2- Das ist aufdringlich js. 3- Das gibt tatsächlich einen Wert zurück. Sie möchten nicht jedes Mal false zurückgeben, wenn Sie auf den Link klicken.
Diego Unanue
11

Ja .. Es ist möglich mit CSS

<a class="disable-me" href="page.html">page link</a>

.disable-me {
    pointer-events: none;
}
pown
quelle
Dies ist der sauberste Weg, aber eine Einschränkung: Es wird nur auf IE11 + caniuse.com unterstützt
pixelfreak
8

Oder rein HTML und CSS ohne Ereignisse:

<div style="z-index: 1; position: absolute;">
    <a style="visibility: hidden;">Page link</a>
</div>
<a href="page.html">Page link</a>
Paul
quelle
1
-1, weil dies ein ziemlich komplizierter / verwirrender Weg ist, um das Problem zu lösen. Es macht auch nicht wirklich das, was die Frage stellt (machen Sie den Link inaktiv). Es deckt nur die Verknüpfung mit einem unsichtbaren Element ab. Die Antwort von Diego ist viel sauberer.
Entwicklung
@developering Ich denke, Diego's Antwort ist auch besser und sollte höher gewählt und akzeptiert werden. Als ich diese Antwort schrieb (vor 3 Jahren), pointer-eventshatte ich jedoch fast keine Browserunterstützung.
Paul
@ Paulpro Ich dachte irgendwie, dass das der Fall war. Entschuldigung für die Ablehnung! Ich möchte nur sicherstellen, dass die aktuellste Antwort oben ist. Danke für die Antwort.
Entwicklung
6

CSS wurde entwickelt, um die Präsentation und nicht das Verhalten zu beeinflussen.

Sie könnten etwas JavaScript verwenden.

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

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

HTML:

<a id="my-link" href="page.html">page link</a>

Javascript:

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

Dies hat den Vorteil, dass Logik und Präsentation sauber voneinander getrennt sind. Wenn Sie eines Tages entscheiden, dass dieser Link etwas anderes bewirken würde, müssen Sie sich nicht mit dem Markup herumschlagen, sondern nur mit dem JS.

Pixelfreak
quelle
4
Sie wissen, dass Sie leicht Nicht-jQuery-Code schreiben können, um dasselbe zu tun, das ziemlich viel schneller laufen würde: document.getElementById('my-link').onclick = function(){ return false; };
Paul
1
Ich denke, die meisten Leute wollen (und sollten) einen Rahmen verwenden, um die Entwicklung zu erleichtern. Der Autor hat keine Leistungseinschränkung angegeben, aber jQuery minimiert und komprimiert ist nur 31 KB groß. Ich denke, der Nutzen überwiegt bei weitem die Kosten.
Pixelfreak
2
Ernsthaft? Welcher Browser unterstützt onclick oder getElementById nicht? Okay, IE 2 unterstützt onclick nicht, aber auch CSS nicht ... und ich bezweifle sehr, dass Ihr jQuery-Code dort auch in IE 2 funktioniert.
Paul
1
Der Geschwindigkeitsunterschied kann gering sein, aber nicht, wenn Sie die Downloadzeit für die jQuery-Bibliothek nicht erreichen können. Ich denke wirklich nicht, dass es eine gute Idee ist, die Verwendung von jQuery zu fördern, wenn Sie es nicht benötigen, da die Leute davon abhängig werden und vergessen, wie man Javascript ohne es schreibt.
Paul
4
@PaulPRO Diese Diskussion ist ohne die Anforderungen des Autors umstritten. Jedes Framework hat seinen Zweck. Wenn er JS nicht fließend beherrscht und nur eine Mom-n-Pop-Website erstellt und ein DOM-Element manipulieren muss, ist es für ihn viel einfacher, ein Framework zu verwenden. Ihre Zurückhaltung bei der Verwendung eines Frameworks ist lächerlich. PHP ist in C geschrieben. Bedeutet das, dass Sie C schreiben und kein PHP verwenden sollten? iOS hat UIKit, Core Data, Quartz usw. Flash hat Tonnen von häufig verwendeten Bibliotheken von Drittanbietern. Auch hier hat jedes Framework seinen Zweck. Eine puristische, nicht eingebaute Mentalität hilft niemandem.
Pixelfreak
2

Die Antwort ist:

<a href="page.html" onclick="return false">page link</a>
Doa
quelle
0

Es kann in CSS durchgeführt werden und ist sehr einfach. Ändern Sie das "a" in ein "p". Ihr "Seitenlink" führt sowieso nicht zu irgendwo, wenn Sie ihn nicht anklickbar machen möchten.

Wenn Sie Ihrem CSS sagen, dass es eine Hover-Aktion für dieses bestimmte "p" ausführen soll, sagen Sie Folgendes:

(Für dieses Beispiel habe ich dem "p" die "Beispiel" -ID gegeben)

#example
{
  cursor:default;
}

Jetzt bleibt Ihr Cursor auf der gesamten Seite unverändert.

Hollnder
quelle
-1
<a href="page.html" onclick="return false" style="cursor:default;">page link</a>
John
quelle
Es ist nicht erforderlich, eine separate Antwort hinzuzufügen. Ihr Kommentar zur Antwort von @KaranK ist ausreichend, dachte ich. Bitte vermeiden Sie doppelte Antworten.
MAChitgarha