jQuery - Fügen Sie eine aktive Klasse hinzu und entfernen Sie aktiv von einem anderen Element beim Klicken

9

Ich bin neu bei jQuery, also tut es mir leid, wenn das eine dumme Frage ist. Aber ich habe durch Stack Overflow geschaut und kann Dinge finden, die halbwegs funktionieren, ich kann es einfach nicht zum Laufen bringen.

Ich habe 2 Tabs - 1 ist aktiv, das andere ist nicht. Sobald auf die inaktive Registerkarte geklickt wird, möchte ich, dass die Klasse aktiv und die vorherige aktive Klasse entfernt wird. Und umgekehrt, jedes Mal, wenn auf eine inaktive Registerkarte geklickt wird.

Jede Hilfe wäre großartig!

Folgendes habe ich zur Zeit: Ссылка

Hier habe ich versucht, die Klasse hinzuzufügen und zu entfernen:

%Vor%

Wenn jemand mit der Verschmelzung der 2 Bits Skript in meiner Geige helfen könnte, wäre das auch eine massive Hilfe. Da ich ziemlich verwirrt darüber bin, wie das gemacht wird!

Danke:)

    
Nick 20.03.2014, 09:42
quelle

6 Antworten

29

Versuchen Sie es

%Vor%

Wenn Sie $(".tab").addClass("active"); verwenden, zielt es auf alle Elemente mit dem Klassennamen .tab ab. Stattdessen, wenn Sie this verwenden, sucht es nach dem Element, das ein Ereignis hat, in Ihrem Fall das Element, das angeklickt ist.

Hoffe das hilft dir.

    
James 20.03.2014, 09:45
quelle
4

Sie können die Klasse active von allen .tab entfernen und $(this) verwenden, um auf die aktuell ausgewählte Seite .tab :

zu verweisen %Vor%

Ihr Code funktioniert nicht, weil Sie nach dem Entfernen der Klasse active von allen .tab auch die Klasse active erneut zu% .tab hinzufügen. Daher müssen Sie $(this) anstelle von $('.tab') verwenden, um die Klasse active nur zum angeklickten .tab anchor

hinzuzufügen

Aktualisierte Geige

    
Felix 20.03.2014 09:43
quelle
3

Sie haben bereits die aktive Klasse aus allen Registerkarten entfernt, aber Sie fügen dann die aktive Klasse wieder allen Registerkarten hinzu. Sie sollten die aktive Klasse nur zur aktuell ausgewählten Registerkarte hinzufügen, wie zB Ссылка

%Vor%     
mayrs 20.03.2014 09:45
quelle
3
%Vor%     
demonofthemist 20.03.2014 09:47
quelle
2

Verwenden Sie jquery cookie Ссылка und dann können Sie sicher sein, dass die Klasse auf der Seitenaktualisierung bleibt.

Speichert die ID des angeklickten Elements im Cookie und verwendet diese, um die Klasse beim Aktualisieren hinzuzufügen.

%Vor%     
Gary 25.06.2014 09:25
quelle
1

Versuchen Sie Folgendes:

%Vor%     
hamidreza samsami 19.02.2017 12:58
quelle

Tags und Links