jQuery: удалить класс, если щелкнуть другой элемент

У меня есть ul-список, который содержит li-элементы. Когда пользователь нажимает на один из этих элементов li, класс должен быть добавлен к этому элементу.

Это легко настроить, однако, когда другой li-элемент нажат, я хочу, чтобы"активный" -класс был удален из неактивного li.

Я сделал jsfiddle проблемы: http://jsfiddle.net/tGW3D/

должен быть один li-элемент, который является красным в любой момент времени. Если щелкнуть второй и тогда первый, только первый должен быть красный.

17
addclass jquery toggleclass

8 ответов

это удалит активный класс из каждого li, которые имеют активный и чем добавит к элементу, который был нажат.

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

можно использовать siblings и removeClass методы.

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

http://jsfiddle.net/Lb65e/

17

просто удалите все экземпляры .active сначала, а затем добавьте его:

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

Регистрация: http://jsfiddle.net/tGW3D/2/

2

что-то вроде этого?

http://jsfiddle.net/c7ZE4/

вы можете использовать функцию братьев и сестер. addClass возвращает тот же объект jQuery $(this), поэтому вы можете связать братья и сестры метод, который возвращает все остальные элементы, кроме $(this). 

 $('li').click(function() {
  $(this).addClass('active').siblings().removeClass('active');
 });
2
 $('li').click(function() {
      $(this).addClass('active'); // add the class to the element that's clicked.
      $(this).siblings().removeClass('active'); // remove the class from siblings. 
});

Если вы знаете jquery, вы можете связать его, как показано ниже.

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

выше код будет делать трюк для вас. попробуйте эту демо

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

вы меняете класс css этим кодом:

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

ссылке jsfiddle

-1