Ich zeige hier Anhand eines Beispiels wie man mit JavaScript einen aktiven Menüpunkt farblich hervorheben kann.
Dieses Beispiel funktioniert indem der aktive Menüpunkt eine zusätzliche Klasse active erhält und diese Klasse, sobald ein Menüpunkt nicht mehr aktiv ist, wieder entfernt wird.
CSS
Damit ich den aktiven Menüpunkt farblich hervorheben kann füge ich in der CSS-Datei die Klasse active hinzu, die einzige Eigenschaft dieser Klasse ist dass sich die Hintergrundfarbe auf schwarz ändert.
.topnav li a.active {
background: #000;
}
HTML
Im nächsten Schritt muss man mittels JavaScript alle Menüpunkte auswählen können, darum füge ich in der HTML-Datei die Klasse navlist den Menüpunkten bei.
<li><a href="#" class="navlist">Menü</a></li>
JavaScript
Jetzt kann man in der JavaScript-Datei alle Elemente mit der Klasse navlist auswählen.
let navlist = document.querySelectorAll('.navlist');
Um den aktiven Menüpunkt die Klasse active zu vergeben verwende ich JavaScript classList. Mit JavaScript classList kann man einen HTML-Element eine CSS-Klasse hinzufügen.
Dazu gehe ich in der JavaScript-Datei mit einer for-Schleife durch alle Menüpunkte und bestimme dass wenn ein Menüpunkt angeklickt wird dieser Menüpunkt die Klasse active erhält.
if (navlist[x] == this) {
navlist[x].classList.add('active');
Und sonst wird diesen Menüpunkt die Klasse active entfernt.
else {
navlist[x].classList.remove('active');
Quellen für dieses Beispiel:
https://stackoverflow.com/questions/49538866/js-set-active-class-only-on-current-element
https://www.w3schools.com/howto/howto_js_active_element.asp
https://alligator.io/js/classlist/
https://www.mediaevent.de/javascript/classlist.html
https://www.mediaevent.de/javascript/event-listener.html
https://developer.mozilla.org/de/docs/Web/JavaScript/Guide/schleifen_und_iterationen
https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/if...else
Kommentar eingeben