0 5762

jQuery Tutorial – einem Element (div, span etc.) eine Klasse hinzufügen oder entfernen

Manchmal muss man nachträglich einem Element eine Klasse hinzufügen.
Ein klassisches Beispiel ist eine Navigation. Hier wird oftmals nach einem Klick eine aktiv Klasse hinzugefügt.
Wir bauen ein kleines Menu:
Beispielcode HTML:

<ul>
<li>Home</li>
<li>Kunden</li>
<li>Referenzen</li>
<li>Kontakt</li>
<li>Impressum</li>
</ul>

Beispielcode CSS:

ul li { 
   padding: 10px;
   background: #383838;
   color: #f8f8f8;
   width: 100px;
}
ul li.active { 
   padding: 10px;
   background: #c83838;
   color: #f8f8f8;
}

Nun fragen wir mit einem Click Listener ab, ob ein LI angeklickt wird und setzen dann mit $(this). auf das geklickte Element die aktive Klasse:
Beispielcode jQuery:

$('ul li').on('click', function() {
   $(this).addClass('active');
});

Wenn nun mehrere Elemente angeklickt werden sind alle aktiv. Also müssen wir noch bevor wir das geklickte Element aktiv setzen alle anderen deaktivieren und die Klasse active entfernen.
Beispielcode jQuery:

$('ul li').on('click', function() {
   $('ul li').removeClass('active');
   $(this).addClass('active');
});

Nun könnt Ihr noch direkt in diesem Codepen ein wenig experimentieren:

See the Pen jQuery Tutorial eine Klasse hinzufügen oder entfernen by Andreas Lang (@sphinxflash) on CodePen.


Nun wünsche ich Euch noch viel Spaß mit jQuery.

No related posts.

Author: Andreas Lang

Sphinx-Flashdesign.de

Andreas Lang hat im Alter von 12 Jahren begonnen, auf einem Atari ST 1040 STFM in Omikron und STOS Basic zu programmieren.
Spiele interessierten ihn nicht so sehr.
Die Welt der Bits und Bytes hat ihn gefangen.
Programmierertechnisch folgten auf dem ersten 486er Turbo Pascal, Visual Basic.
Mit dem ersten Internet Anschluss per 56k Modem folgten HTML, Javascript, CSS und Macromedia Flash. Die Website www.wizzquiz.de wurde geboren.
Eine Flash Online-Gaming Plattform mit Quiz Spielen, Memory, Sokoban etc.
Später entwickelte er Software unter anderem für Continentale und Siemens AG.
Seit zwei Jahrzehnten konzentriert er sich auf die Webentwicklung und Webdesign mit dem Schwerpunkt PHP, Laravel und Javascript und betreut seine Kunden mit Herz und Seele in allen Bereichen von Entwicklung, Design, Suchmaschinenoptimierung, IT-Recht, IT-Sicherheit etc.

Weiter