Wie kann ich aktuelle Seitenlinks mithilfe von CSS und JavaScript unterschiedlich gestalten?

Aktuelle Seitenlinks mit CSS hervorheben

Frage:

Wie kann ich den Stil ändern? Anzahl der Links auf der aktuellen Seite, um sie von anderen zu unterscheiden? Konkret möchte ich die Text- und Hintergrundfarben austauschen.

CSS-Lösung:

li a {
  color: #A60500;
}

li a:hover {
  color: #640200;
  background-color: #000000;
}

Beispiel:

<ul>

JavaScript-Lösung:

Um das Aktiv automatisch anzuwenden Styling können Sie die .each-Funktion von jQuery verwenden:

$(document).ready(function() {
    $("[href]").each(function() {
        if (this.href == window.location.href) {
            $(this).addClass("active");
        }
    });
});

Überlegungen:

<ul>

Für eine präzisere Linkauswahl sollten Sie die Verwendung eines Klassenattributs wie „nav“ in Betracht ziehen [href]".

Wenn Ihre URLs Abfrageparameter enthalten, sollten Sie diese entfernen Verwenden von:

if (this.href.split("?")[0] == window.location.href.split("?")[0]) ...

Dieser Ansatz macht die manuelle Änderung jeder Seite überflüssig und gewährleistet ein einheitliches Design über verschiedene Seiten-URLs hinweg.

Das obige ist der detaillierte Inhalt vonWie kann ich aktuelle Seitenlinks mithilfe von CSS und JavaScript unterschiedlich gestalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!