Festlegen eines aktiven Menüelements basierend auf der aktuellen URL mit jQuery

Dieses Problem tritt beim Erstellen von Websites immer wieder auf: Wie bestimme ich den aktuellen Standort des Benutzers, damit ich den aktiven Bereich im Navigationsmenü hervorheben kann? Es ist so ein Grundbedürfnis, aber die Lösung scheint bei jedem neuen Build neu erfunden zu werden.

Es gibt zwei Hauptwege, auf denen Sie dieses Problem dynamisch lösen können: Server- und Client-Seite. Das Lösen auf der Serverseite ist hilfreich, da Sie die angeforderte Seite besser im Griff haben, dies ist jedoch nicht immer praktisch. Mit ein wenig Planung ist es ziemlich einfach, dies auf der Clientseite mit JavaScript (und optional jQuery) zu lösen.

Angenommen, Sie haben ein grundlegendes Navigationsmenü in Ihrer Kopfzeile und möchten die Hintergrundfarbe der aktuellen Seite ändern, auf der Sie sich befinden.

Wenn Sie auf Tour klicken und zur Tour-Seite gelangen, soll das Menü im Idealfall Ihren aktuellen Standort widerspiegeln.

Um dies mit jQuery zu tun, vergleichen wir das href-Attribut jedes Menü-Links mit der aktuellen Browser-URL und versuchen, eine Übereinstimmung zu finden. Wenn eine Übereinstimmung gefunden wird, setzen wir dieses Element auf aktiv, indem wir dem eine Klasse hinzufügen

  • Element.

    Das Nettoergebnis dieses sehr einfachen Beispiels sieht so aus

    Bei jedem Laden der Seite führt dieses Skript die href jedes Menü-Links aus und vergleicht sie mit der aktuellen Seiten-URL, beginnend nach dem Domain-Namen und weiter für so viele Zeichen, wie in der href vorhanden sind (ähnlich wie bei einer Funktion "answersWith ()"). Auf diese Weise können Unterseiten von "Tour" Tour auch als aktiven Abschnitt kennzeichnen, z. B. /tour/section2.html. Wenn eine Übereinstimmung gefunden wird, wird das übergeordnete Element - in diesem Fall ein

  • - Es wurde eine Klasse von "aktiv" hinzugefügt.

    Diese Lösung kann bei jsFiddle zur Verwendung gefunden werden und ist auch unten eingebettet. Die Hauptsache, die Sie für Ihre eigenen Bedürfnisse ändern müssen, ist der Selektor ".nav" in Zeile 9 des JavaScript. Dies sollte geändert werden, um das Navigationselement auszuwählen, das Sie verarbeiten möchten.

    Beachten Sie, dass das jsFiddle-Beispiel nicht funktioniert, da Sie die URL im Ergebnisfenster nicht ändern können. Sie können den Code jedoch einfach in eine HTML-Datei kopieren, um ihn zu testen.