Wie kann ich mithilfe von JavaScript dynamisch aktive Navigationsklassen zu meinem Website-Menü hinzufügen?

Dynamische aktive Navigationsklassen zu Menüs hinzufügen

Beim Navigieren auf einer Webseite ist es üblich, den aktiven Menüpunkt hervorzuheben, der der aktuellen Seite entspricht . Dies verbessert die Benutzererfahrung, indem visuelle Hinweise auf die aktuelle Position innerhalb der Site-Hierarchie bereitgestellt werden.

Um diese Funktionalität zu implementieren, verwenden wir JavaScript, um die aktuelle URL zu identifizieren und dem entsprechenden Menüelement eine „aktive“ Klasse hinzuzufügen .

So fügen Sie eine aktive Navigationsklasse mit JavaScript hinzu

Lassen Sie uns eine Lösung mit der leistungsstarken Funktion von jQuery untersuchen Bibliothek:

$(function () {
    var current = location.pathname;
    $('#nav li a').each(function () {
        var $this = $(this);
        if ($this.attr('href').indexOf(current) !== -1) {
            $this.addClass('active');
        }
    });
});

Erklärung:

• Wenn das Dokument fertig ist, wird das Skript initialisiert.
• Die Eigenschaft location.pathname wird abgerufen Der Pfad der aktuellen Seite.
• Es durchläuft die Ankertags jedes Menüelements ($('#nav li a')).
• Für jedes Anker-Tag prüft es mit der Funktion indexOf(), ob sein href-Attribut den aktuellen Pfad enthält.
• Wenn eine Übereinstimmung gefunden wird, wird das entsprechende Anker-Tag angezeigt der Klasse „aktiv“ zugewiesen.

Wichtiger Hinweis:

Wenn das Menü mehrere Links enthält Wenn Sie auf dieselbe Seite verweisen, kann dieser Ansatz das aktive Element möglicherweise nicht genau bestimmen. In solchen Szenarien ist möglicherweise zusätzliche Logik erforderlich, um diese Fälle zu behandeln.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von JavaScript dynamisch aktive Navigationsklassen zu meinem Website-Menü hinzufügen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!