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.
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');
});
Vous pouvez utiliser les méthodes siblings
et removeClass
.
$('li').click(function() {
$(this).addClass('active').siblings().removeClass('active');
});
Supprimez d'abord toutes les instances de .active
, puis ajoutez-le:
$('ul li').on('click', function() {
$('ul li.active').removeClass('active');
$(this).addClass('active');
});
$('li').click(function() {
$(this).siblings().removeClass('active');
$(this).addClass('active');
});
Vérifier: http://jsfiddle.net/tGW3D/2/
Quelque chose comme ça?
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');
});
$('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
<script>
$(function() {
$('li').click(function() {
$("li.active").removeClass("active");
$(this).addClass('active');
});
});
</script>