jQuery – Ajoute une classe active et supprime l’actif d’un autre élément au clic

Je suis nouveau dans jQuery, donc je suis désolé si c’est une question idiote. Mais j’ai parcouru Stack Overflow et je peux trouver des choses qui fonctionnent à moitié, je ne peux tout simplement pas les faire fonctionner pleinement.

J’ai 2 tabs – 1 est actif, l’autre ne l’est pas. Une fois que l’onglet inactif est cliqué, je souhaite que la classe d’actif soit atsortingbuée et que la classe active précédente soit supprimée. Et inversement, chaque fois que vous cliquez sur un onglet inactif.

Toute aide est la bienvenue!

Voici ce que j’ai actuellement: http://jsfiddle.net/zLpe5/

Voici ce que j’ai essayé d’append et de supprimer la classe:

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

Si quelqu’un pouvait m’aider à fusionner les 2 éléments de script de mon violon, ce serait également une aide précieuse. Comme je suis assez confus sur la façon dont cela se fait!

Je vous remercie 🙂

Essaye ça

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

lorsque vous utilisez $(".tab").addClass("active"); , il cible tous les éléments avec le nom de classe .tab . Lorsque vous l’utilisez, il recherche l’élément ayant un événement, dans votre cas l’élément sur lequel vous avez cliqué .

J’espère que cela vous aide.

Vous pouvez supprimer la classe active de tous les .tab et utiliser $(this) pour cibler le fichier .tab actuellement sélectionné:

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

Votre code ne fonctionnera pas car, après avoir supprimé la classe active de tous les .tab , vous appendez à nouveau la classe active à tous les .tab . Vous devez donc utiliser $(this) au lieu de $('.tab') pour append la classe active uniquement à l’ancre .tab vous .tab cliqué.

Violon mis à jour

Vous avez déjà supprimé la classe active de tous les tabs, mais vous ajoutez ensuite la classe active à tous les tabs. Vous ne devriez append que la classe active à l’onglet actuellement sélectionné, de la manière suivante: 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"); } }); }); 

Utilisez le cookie jQuery https://github.com/carhartl/jquery-cookie et vous pourrez alors être sûr que la classe restra à rafraîchir la page.

Stocke l’id de l’élément cliqué dans le cookie, puis l’utilise pour append la classe lors de l’actualisation.

  //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: '/' }); }); 

Essaye celui-là:

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