Wie ändere ich die Farbe des aktuellen Seitenlinks mit CSS und jQuery?

Ändern der Farbe des aktuellen Seitenlinks mit CSS

Das Manipulieren des Erscheinungsbilds des aktuellen Seitenlinks ist eine häufige CSS-Styling-Anforderung. 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:

<code class="css">li a {
  color: #A60500;
}

li a:hover {
  color: #640200;
  background-color: #000000;
}</code>

jQuery-Skript

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

<code class="javascript">$(document).ready(function() {
    $("[href]").each(function() {
        if (this.href == window.location.href) {
            $(this).addClass("active");
        }
    });
});</code>

Abhängig von Ihrer spezifischen Seitenstruktur müssen Sie möglicherweise den Selektor für verfeinern Links ($("[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:

<code class="javascript">if (this.href.split("?")[0] == window.location.href.split("?")[0]) ...</code>

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

Das obige ist der detaillierte Inhalt vonWie ändere ich die Farbe des aktuellen Seitenlinks mit CSS und jQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!