jQuery: Eliminar clase si se hace clic en otro elemento

Question

Tengo una ul-list que contiene li-elements. Cuando el usuario hace clic en uno de estos elementos li, se debe agregar una clase a ese elemento.

Esto es fácil de configurar, sin embargo, cuando se hace clic en el otro elemento li, quiero que la clase "activa" se elimine del li no activo.

me han hecho una jsFiddle del problema: http://jsfiddle.net/tGW3D/

Debe haber un elemento li que es de color rojo en un momento dado. Si hace clic en el segundo y luego en el primero, solo el primero debe ser rojo.

Answer 1

Esto eliminará la clase activa de cada li que tenga activo y que se agregará al elemento al que se hizo clic.

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

Answer 2

Puede utilizar siblingsremoveClass y métodos.

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

http://jsfiddle.net/Lb65e/

Answer 3

Basta con retirar todas las instancias de .active primero, y luego añadirlo:

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

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

Answer 5

Algo como esto?

http://jsfiddle.net/c7ZE4/

Usted puede utilizar la función de hermanos. addClass devuelve el mismo objeto jquery $ (this) para que pueda encadenar el método siblings que devuelve todos los demás elementos excepto $ (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. 
}); 

Si conoces jQuery puede encadenar que, como a continuación.

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

El código de arriba hará el truco para usted. Try this demo

Answer 7

Se cambia la clase css por este código:

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

Enlace a jsfiddle

Answer 8

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