web-dev-qa-db-fra.com

jQuery: Supprimer la classe si un autre élément est cliqué

J'ai une ul-liste qui contient des éléments li. Lorsque l'utilisateur clique sur l'un de ces éléments li, une classe doit être ajoutée à cet élément. 

Ceci est facile à configurer, cependant, quand on clique sur l'autre élément li, je veux que la classe "active" soit supprimée de la li non active.

J'ai fait un jsfiddle du problème: http://jsfiddle.net/tGW3D/

Il devrait y avoir un élément li qui est rouge à la fois. Si vous cliquez sur le second puis sur le premier, seul le premier doit être rouge.

jqueryaddclasstoggleclass
17
Albin N

Cela supprimera la classe active de chaque li ayant actif et qui s'ajoutera à l'élément sur lequel l'utilisateur a cliqué.

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

Vous pouvez utiliser les méthodes siblings et removeClass.

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

http://jsfiddle.net/Lb65e/

18
undefined

Supprimez d'abord toutes les instances de .active, puis ajoutez-le:

$('ul li').on('click', function() {  
    $('ul li.active').removeClass('active');
    $(this).addClass('active');    
});
5
BenM
$('li').click(function() {
  $(this).siblings().removeClass('active');
  $(this).addClass('active');
});

Vérifier: http://jsfiddle.net/tGW3D/2/

2
Alex

Quelque chose comme ça?

http://jsfiddle.net/c7ZE4/

Vous pouvez utiliser la fonction frères et soeurs. addClass retourne le même objet jQuery $ (this) afin que vous puissiez chaîner la méthode fratrie qui renvoie tous les autres éléments sauf $ (this). 

 $('li').click(function() {
  $(this).addClass('active').siblings().removeClass('active');
 });
2
Michael Koper
 $('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 vous connaissez jQuery, vous pouvez l’enchaîner comme ci-dessous.

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

Le code ci-dessus fera l'affaire pour vous. Essayez cette démo

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