Wie kann ich meinem Navigationsmenü eine „aktive' Klasse hinzufügen, um die aktuelle Seite hervorzuheben?

Aktive Navigationsklasse hinzufügen, um die aktuelle Seite widerzuspiegeln

In der Webentwicklung ist es üblich, den Menüpunkt hervorzuheben, der die aktuell aktive Seite darstellt. Um dies zu erreichen, können Sie dem entsprechenden Menülisteneintrag dynamisch eine „aktive“ Klasse hinzufügen. So können Sie es mit JavaScript machen:

JavaScript Code:

<br>$(function(){<pre class="brush:php;toolbar:false">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');
    }
})

})

Erklärung:

Dieses Code-Snippet erzielt das gewünschte Ergebnis, indem es an bindet Ereignishandler für das Bereitschaftsereignis des Dokuments (das ausgelöst wird, wenn die Seite vollständig geladen ist). Anschließend durchläuft es jeden Link im Menü und prüft, ob sein href-Attribut mit dem Pfadnamen der aktuellen Seite übereinstimmt. Wenn eine Übereinstimmung gefunden wird, wird die „aktive“ Klasse zum passenden Link hinzugefügt, was visuell anzeigt, dass sich der Benutzer auf der entsprechenden Seite befindet.

Anwenden des Codes:

Um diese Funktionalität auf Ihrer Website zu implementieren, kopieren Sie einfach den JavaScript-Code und fügen Sie ihn in den Header Ihrer Seite ein. Stellen Sie sicher, dass sich der Code innerhalb des <script></script> befindet. Tags und dass Sie die jQuery-Bibliothek als Voraussetzung einbinden.

Das obige ist der detaillierte Inhalt vonWie kann ich meinem Navigationsmenü eine „aktive' Klasse hinzufügen, um die aktuelle Seite hervorzuheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!