Wie füge ich Navigationslinks basierend auf der aktuellen URL dynamisch eine „aktive' Klasse hinzu?

Aktive Navigationsklasse hinzufügen, um die aktuelle URL widerzuspiegeln

Das Navigieren auf einer Website erfordert oft einen sichtbaren Hinweis auf die aktuelle Seite, was durch erreicht werden kann Hinzufügen einer „aktiven“ Klasse zum entsprechenden Menüpunkt. In diesem Artikel wird gezeigt, wie diese Funktionalität mithilfe von JavaScript implementiert wird.

Betrachten Sie das Beispiel-Navigationsmenü unten, in dem der Link „Verwalten“ auf der Seite „manageIS.aspx“ als „aktiv“ angezeigt werden sollte:

<ul>

Das folgende JavaScript-Snippet erzielt den gewünschten Effekt:

$(function(){
    var current = location.pathname;
    $('#nav li a').each(function(){
        var $this = $(this);
        // if the current path is like this link, make it active
        if($this.attr('href').indexOf(current) !== -1){
            $this.addClass('active');
        }
    })
})

Dieser Code weist den Pfadnamen der aktuellen Seite zu „aktuelle“ Variable. Anschließend werden alle Menülinks durchlaufen und geprüft, ob deren „href“-Attribut mit dem aktuellen Pfad übereinstimmt. Wenn eine Übereinstimmung gefunden wird, wird die Klasse „aktiv“ zu diesem Link hinzugefügt.

Anders als das in der Frage bereitgestellte ursprüngliche JavaScript basiert dieser Ansatz nicht auf Klickereignissen und wird beim Laden der Seite ausgeführt. Daher bleibt die Klasse „aktiv“ während der gesamten Lebensdauer der Seite bestehen und liefert jederzeit einen klaren Hinweis auf die aktuelle Seite.

Das obige ist der detaillierte Inhalt vonWie füge ich Navigationslinks basierend auf der aktuellen URL dynamisch eine „aktive' Klasse hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!