jQuery: Entfernen Sie die Klasse, wenn auf ein anderes Element geklickt wird

Question

Ich habe eine ul-Liste, die li-Elemente enthält. Wenn der Benutzer auf eines dieser li-Elemente klickt, sollte eine Klasse zu diesem Element hinzugefügt werden.

Dies ist einfach einzurichten, wenn jedoch auf das andere li-Element geklickt wird, möchte ich, dass die Klasse "active" aus dem nicht aktiven li entfernt wird. http://jsfiddle.net/tGW3D/

Es sollte zu jeder Zeit sein, ein Li-Element, das rot ist:

Ich habe eine jsfiddle des Problems gemacht. Wenn Sie auf den zweiten und dann auf den ersten klicken, sollte nur der erste rot sein.

Answer 1

Dadurch wird die aktive Klasse aus jeder li entfernt, die aktiv ist und dann zum Element hinzugefügt wird, auf das geklickt wurde.

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

Answer 2

können Sie siblings und removeClass Methoden.

$('li').click(function() { 
    $(this).addClass('active').siblings().removeClass('active'); 
}); 

http://jsfiddle.net/Lb65e/

Answer 3

Entfernen Sie einfach alle Instanzen .active zuerst, und dann hinzufügen:

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

Answer 4

$('li').click(function() { 
    $(this).siblings().removeClass('active'); 
    $(this).addClass('active'); 
}); 

Check: http://jsfiddle.net/tGW3D/2/

Answer 5

So etwas wie das?

http://jsfiddle.net/c7ZE4/

Sie können die Geschwister-Funktion verwenden. addClass gibt das gleiche jquery-Objekt $ (this) zurück, so dass Sie die Methode siblings verketten können, die alle anderen Elemente außer $ (this) zurückgibt.

$('li').click(function() { 
    $(this).addClass('active').siblings().removeClass('active'); 
}); 

Answer 6

$('li').click(function() { 
     $(this).addClass('active'); // add the class to the element that's clicked. 
     $(this).siblings().removeClass('active'); // remove the class from siblings. 
}); 

Wenn Sie wissen, JQuery Sie es wie unten Kette kann.

$('li').click(function() { 
     $(this).addClass('active').siblings().removeClass('active'); 
}); 

Der obige Code wird den Trick für Sie tun. Try this demo

Answer 7

Sie CSS-Klasse ändern, indem Sie diesen Code:

$('li').click(function() { 
    $(this).addClass('active').siblings().removeClass('active'); 
}); 

Link zu jsfiddle

Answer 8

<script> 
    $(function() { 
     $('li').click(function() { 
      $("li.active").removeClass("active"); 
       $(this).addClass('active'); 
      }); 
     }); 
</script>