Active-Klasse in Bootstrap-Nav via JavaScript

Marc Eggert — Sun, 15 Mar 2020 17:25:34 +0000

Quick-Tipp: Oft benötigt und oft – je nach Projektanforderung – via PHP aufwändig zusammenprogrammiert: Es geht um die „active“-Klasse für Bootstrap (oder andere) Navigations-Bars (.navbar). Dies lässt sich relativ einfach und mit 4 Zeilen Code in JavaScript auf Basis von JQuery erledigen.
Im Web-Projekt nutzt man in der Entwicklungsumgebung am Besten eine eigene Script-Datei für die eigenen JavaScripts außerhalb der zusätzlich geladenen Scripts. Für die Produktionsumgebung werden sämtliche Scripts i.d.R. sowieso komprimiert („minified“).

$(document).ready(function($){
	    var url = window.location.href;
	    //alert(window.location.href);
            // Funktioniert auch mit anderen Parametern wie
            // window.location.pathname 
	    $('.navbar li a[href="'+url+'"]').addClass('active');
});

Im Grunde sind es sogar nur zwei Zeilen Code, da die Entscheidenden Zeilen im obigen Code in Zeile 2 und 6 stehen: In Zeile 2 wird die Variable „url“ definiert und mit dem Wert der aktuellen URL besetzt. Was selbst angepasst werden muss, allerdings für Bootstrap-Navbars so bereits passt: Die Klasse („.navbar“) und die Struktur (li->a).

The post Active-Klasse in Bootstrap-Nav via JavaScript first appeared on NET73.

javascript - NET73

Active-Klasse in Bootstrap-Nav via JavaScript