jQuery: Usuń klasę, jeśli kliknięto inny element.

Question

Mam listę ul zawierającą elementy li. Gdy użytkownik kliknie jeden z tych elementów li, do tego elementu należy dodać klasę.

Jest to łatwe do ustawienia, jednak po kliknięciu drugiego elementu li chcę, aby klasa "aktywna" została usunięta z nieaktywnego li.

Zrobiłem jsfiddle problemu: http://jsfiddle.net/tGW3D/

Nie powinno być jednym li-czerwony element, który jest w danym momencie. Jeśli klikniesz drugi, a następnie pierwszy, tylko pierwszy powinien być czerwony.

Answer 1

Spowoduje to usunięcie aktywnej klasy z każdego li, które ma aktywny, a następnie doda do elementu, który został kliknięty.

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

Answer 2

Można użyć siblings i removeClass metod.

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

http://jsfiddle.net/Lb65e/

Answer 3

Wystarczy usunąć wszystkie wystąpienia .active pierwszy, a następnie dodać go:

$('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'); 
}); 

Sprawdź: http://jsfiddle.net/tGW3D/2/

Answer 5

coś takiego?

http://jsfiddle.net/c7ZE4/

Można użyć funkcji rodzeństwa. addClass zwraca ten sam obiekt jquery $ (this), aby można było łańcuchować metodę siblings, która zwraca wszystkie pozostałe elementy z wyjątkiem $ (this).

$('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. 
}); 

Jeśli znasz jQuery można przykuć go jak poniżej.

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

Powyższy kod zrobi za Ciebie. Try this demo

Answer 7

zmienić klasę css przez ten kod:

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

Link do jsfiddle

Answer 8

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