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

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.

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.

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>

Ja .. Es ist möglich mit CSS

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

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

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>

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

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.

Die Antwort ist:

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

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.

<a href="page.html" onclick="return false" style="cursor:default;">page link</a>