text: bootstrap Archives - NET73
  +49-7152-7656600
  info@net73.com
  Rückmeldung binnen 24h
  Facebook-f Twitter Instagram Xing Linkedin
  Posts getaggt mit: bootstrap
  IT & PC
  Active-Klasse in Bootstrap-Nav via JavaScript
  von Marc Eggert | 15. März 2020 , 17:25 Uhr
  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").
  //alert(window.location.href);
  // Funktioniert auch mit anderen Parametern wie
  // window.location.pathname
  $('.navbar li a[href="'+url+'"]').addClass('active');
  Code-Sprache: JavaScript (javascript)
  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).