Beim Bau von Webseiten möchtest du manchmal, dass ein Anker-Link (<a>) sichtbar bleibt, aber nicht funktioniert. Vielleicht arbeitest du noch an diesem Bereich der Website, oder der Link ist nur Dekoration. Was auch immer der Grund ist: Einen Anker nicht klickbar zu machen, geht mit ein paar CSS-Regeln ganz einfach.
Das Code-Schnipsel
Beginnen wir mit einem kurzen Schnipsel, das ein Anker-Tag nicht klickbar macht:
<a href="#" class="inactive-link">Unclickable Link</a>
Füge danach in deinem CSS die folgenden Stile hinzu:
.inactive-link {
pointer-events: none;
cursor: default;
}
Ein Anwendungsfall
Angenommen, du hast ein Navigationsmenü, aber eine der Seiten ist noch in Arbeit. Der Link soll für ein einheitliches Design sichtbar bleiben, Nutzer sollen ihn aber nicht anklicken. Hier ein Beispiel:
<nav>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="#" class="inactive-link">Contact (Coming Soon)</a></li>
</ul>
</nav>
Fazit
Mit nur ein paar Zeilen CSS kannst du jedes Anker-Tag nicht klickbar machen. Das ist ein schneller, wirksamer Weg, inaktive oder Platzhalter-Links zu verwalten. Probier die Technik aus, wenn ein Link sichtbar bleiben, aber nichts tun soll.