jQuery: Rimuovi classe se si fa clic su un altro elemento

Question

Ho un ul-list che contiene li-elements. Quando l'utente fa clic su uno di questi elementi li, deve essere aggiunta una classe a quell'elemento.

Questo è facile da configurare, tuttavia, quando si fa clic sull'altro elemento li, voglio che la classe "attiva" venga rimossa dal li non attivo.

ho fatto una jsfiddle del problema: http://jsfiddle.net/tGW3D/

Ci dovrebbe essere una li-elemento che è di colore rosso in qualsiasi momento. Se fai clic sul secondo e poi sul primo, solo il primo dovrebbe essere rosso.

Answer 1

Questo rimuoverà la classe attiva da ogni li che è attiva e che verrà aggiunta all'elemento su cui è stato fatto clic.

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

Answer 2

È possibile utilizzare siblings e removeClass metodi.

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

http://jsfiddle.net/Lb65e/

Answer 3

semplicemente rimuovere tutte le istanze di .active prima, e poi aggiungerlo:

$('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

qualcosa di simile?

http://jsfiddle.net/c7ZE4/

È possibile utilizzare la funzione di fratelli. addClass restituisce lo stesso oggetto jquery $ (this) in modo da poter concatenare il metodo siblings che restituisce tutti gli altri elementi tranne $ (questo).

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

Se sai jQuery è possibile concatenare è come qui di seguito.

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

Sopra il codice farà il trucco per voi. Try this demo

Answer 7

Si cambia classe CSS da questo codice:

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

Link jsfiddle

Answer 8

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