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

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

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

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

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

Ответы

Ответ 1

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

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

Ответ 2

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

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

http://jsfiddle.net/Lb65e/

Ответ 3

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

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

Ответ 4

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

Check: http://jsfiddle.net/tGW3D/2/

Ответ 5

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

http://jsfiddle.net/c7ZE4/

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

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

Ответ 6

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

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

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

Выше код сделает трюк для вас. Попробуйте эту демонстрацию

Ответ 7

Вы меняете класс css по этому коду:

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

Ссылка на jsfiddle

Ответ 8

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