from - jQuery: eliminar clase si se hace clic en otro elemento

remove class jquery

Question

Tengo una lista ul que contiene li-elementos. 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 de la li no activa.

He hecho un jsfiddle del problema: http://jsfiddle.net/tGW3D/

Debe haber un elemento li que sea rojo a la vez. Si hace clic en el segundo y luego en el primero, solo el primero debe ser rojo.

Answer 1

¿Algo como esto?

http://jsfiddle.net/c7ZE4/

Puedes usar la función hermanos. addClass devuelve el mismo objeto jquery $ (esto), por lo que puede encadenar el método de siblings que devuelve todos los demás elementos excepto $ (esto).

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

Answer 2

Cambia la clase css por este código:

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

Enlace a jsfiddle

Answer 3

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

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

Answer 4

Puedes usar siblings y métodos removeClass .

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

http://jsfiddle.net/Lb65e/

Answer 5

Simplemente elimine todas las instancias de .active primero, y luego agréguelo:

$(''ul li'').on(''click'', function() {
$(''ul li.active'').removeClass(''active'');
$(this).addClass(''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 sabes jquery puedes encadenarlo como abajo.

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

El código anterior hará el truco por ti. Prueba esta demo

Answer 7

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

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

Answer 8

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