Wie kann ich mit CSS und jQuery den Link zur aktuellen Seite in einem Navigationsmenü hervorheben?

So ändern Sie die Linkfarbe für die aktuelle Seite mithilfe von CSS und jQuery

Problem:

Wie kann ich die Text- und Hintergrundfarben eines Links ändern, um die aktuelle Seite in einer Navigation hervorzuheben? Menü?

CSS-Lösung:

Für die grundlegende Gestaltung stellt CSS den Li-Selektor bereit, um alle Links innerhalb von Listenelementen anzusprechen:

li a {
  color: #A60500;
}

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

Dieser Ansatz unterscheidet jedoch nicht den aktuellen Seitenlink.

jQuery Lösung:

Um den aktuellen Seitenlink dynamisch hervorzuheben, kann die .each-Funktion von jQuery verwendet werden:

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

Dieser Code durchläuft alle Links und prüft, ob deren href mit dem aktuellen übereinstimmt Seiten-URL und fügt die „aktive“ Klasse entsprechend der vordefinierten hinzu Stile.

Überlegungen:

• Grenzen Sie die Linkauswahl mit CSS-Selektoren wie $("nav [href]") ein.
• Behandeln Sie URL-Parameter, indem Sie sie mit this.href.split("?")[0] entfernen.
• Mit diesem Ansatz können Sie manuelle Eingriffe vermeiden Änderungen auf jeder Seite und Wahrung der Konsistenz im Link-Stil.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS und jQuery den Link zur aktuellen Seite in einem Navigationsmenü hervorheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!