Ändern der Farbe des aktuellen Seitenlinks mit CSS

Das Manipulieren des Erscheinungsbilds des aktuellen Seitenlinks ist eine häufige CSS-Stilanforderung. Um es von anderen Seitenlinks zu unterscheiden, bevorzugen Benutzer häufig den Austausch der Text- und Hintergrundfarben. Hier ist eine umfassende Lösung für Ihre Styling-Anfrage:

CSS-Styling

Um den aktuellen Seitenlink zu formatieren, fügen Sie die folgenden CSS-Regeln zu Ihrem Stylesheet hinzu:

li a {
  color: #A60500;
}

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

jQuery-Skript

Mit dem bereitgestellten jQuery-Skript können Sie den aktuellen Seitenlink identifizieren und ihm dynamisch eine Klasse hinzufügen:

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

Abhängig von Ihrer spezifischen Seitenstruktur müssen Sie möglicherweise die Auswahl für Links verfeinern ($("[href]")). Wenn die Links beispielsweise in einem Navigationselement enthalten sind, können Sie die Auswahl auf $("nav [href]") eingrenzen.

Wenn Ihre Seite URL-Parameter verwendet, können Sie diese vor dem Vergleich entfernen Links, um sicherzustellen, dass der aktuelle Seitenlink erkannt wird:

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

Dieser Ansatz macht es überflüssig, den CSS-Stil für jede Seite einzeln zu ändern.