jQuery – Agregar clase activa y eliminar activo de otro elemento al hacer clic

Soy nuevo en jQuery, así que lo siento si esta es una pregunta tonta. Pero he estado buscando en Stack Overflow y puedo encontrar cosas que funcionan a medias, simplemente no puedo lograr que funcionen por completo.

Tengo 2 tabs: 1 está activo y el otro no. Una vez que se hace clic en la pestaña inactiva, quiero que se le dé la clase de activo y la clase activa anterior que se eliminará. Y viceversa cada vez que se hace clic en una pestaña inactiva.

¡Cualquier ayuda sería genial!

Esto es lo que tengo actualmente: http://jsfiddle.net/zLpe5/

Esto es lo que he intentado para agregar y eliminar la clase:

$(document).ready(function() { $(".tab").click(function () { $(".tab").removeClass("active"); $(".tab").addClass("active"); }); }); 

Si alguien pudiera ayudarme con la fusión de los 2 bits de script en mi violín, eso sería una gran ayuda también. ¡Como estoy bastante confundido acerca de cómo se hace eso!

Gracias 🙂

Prueba esto

 $(document).ready(function() { $(".tab").click(function () { $(".tab").removeClass("active"); // $(".tab").addClass("active"); // instead of this do the below $(this).addClass("active"); }); }); 

cuando está usando $(".tab").addClass("active"); , se dirige a todos los elementos con el nombre de clase .tab . En cambio, cuando usa this , busca el elemento que tiene un evento, en su caso, el elemento al que se hace clic .

Espero que esto te ayude.

Puede eliminar la clase active de todos .tab y usar $(this) para apuntar al actual .tab :

 $(document).ready(function() { $(".tab").click(function () { $(".tab").removeClass("active"); $(this).addClass("active"); }); }); 

Su código no funcionará porque después de eliminar la clase active de todos .tab , también agrega la clase active a todos .tab nuevo. Por lo tanto, necesita usar $(this) lugar de $('.tab') para agregar la clase active solo al ancla de .tab

Fiddle actualizado

Ya eliminaste la clase activa de todas las tabs pero luego agregaste la clase activa, nuevamente, a todas las tabs. Solo debe agregar la clase activa a la pestaña actualmente seleccionada como http://jsfiddle.net/QFnRa/

 $(".tab").removeClass("active"); $(this).addClass("active"); 
 $(document).ready(function() { $(".tab").click(function () { if(!$(this).hasClass('active')) { $(".tab.active").removeClass("active"); $(this).addClass("active"); } }); }); 

Use la cookie de jquery https://github.com/carhartl/jquery-cookie y luego puede estar seguro de que la clase permanecerá en la actualización de la página.

Almacena la identificación del elemento cliqueado en la cookie y luego la usa para agregar la clase en la actualización.

  //Get cookie value and set active var tab = $.cookie('active'); $('#' + tab).addClass('active'); //Set cookie active tab value on click //Done this way to preserve after page refresh $('.topTab').click(function (event) { var clickedTab = event.target.id; $.removeCookie('active', { path: '/' }); $( '.active' ).removeClass( 'active' ); $.cookie('active', clickedTab, { path: '/' }); }); 

Prueba este:

 $(document).ready(function() { $(".tab").click(function () { $("this").addClass("active").siblings().removeClass("active"); }); });