Добавить и удалить класс при нажатии с помощью jQuery?

Пожалуйста, смотрите fiddle.

Я пытаюсь добавить и удалить класс на элементах li, которые нажаты. Это меню, и когда один клик по каждому элементу li, я хочу, чтобы он получил класс, а все остальные элементы li удалили класс. Таким образом, только один элемент li имеет класс за раз. Вот как далеко я получил (см. Скрипку). Я не уверен, как заставить "о-ссылку" начинаться с текущего класса, но затем он удаляется, когда нажимается один из других элементов li?

$('#about-link').addClass('current');
$('#menu li').on('click', function() {
    $(this).addClass('current').siblings().removeClass('current');
});

Ответ 1

Почему бы не попробовать что-то вроде этого?

$('#menu li a').on('click', function(){
    $('#menu li a.current').removeClass('current');
    $(this).addClass('current');
});

JSFiddle

Ответ 2

Другие элементы li не являются братьями и сестрами элемента a.

$('#menu li a').on('click', function(){
    $(this).addClass('current').parent().siblings().children().removeClass('current');
});

Ответ 3

Вы применяете свой класс к элементам <a>, которые не являются братьями и сестрами, потому что каждый из них заключен в элемент <li>. Вам нужно переместить дерево в родительский <li> и найти "элементы в браке и сестрах на этом уровне".

$('#menu li a').on('click', function(){
$(this).addClass('current').parent().siblings().find('a').removeClass('current');
});

Смотрите обновленная скрипка

Ответ 4

Вы можете сделать это: -

$('#about-link').addClass('current');
$('#menu li a').on('click', function(e){
    e.preventDefault();
    $('#menu li a.current').removeClass('current');
    $(this).addClass('current');
});

Демо: Fiddle

Ответ 5

вы можете попробовать это вместе, это может помочь дать более короткий код при большой функции.

$('#menu li a').on('click', function(){ $('li a.current').toggleClass('current'); });

Ответ 6

Попробуйте в главном разделе сайта:

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

Ответ 7

Вот статья с живой рабочей демонстрацией Анимация классов в JQuery p >

Вы можете попробовать это,

$(function () {
   $("#btnSubmit").click(function () {
   $("#btnClass").removeClass("btnDiv").addClass("btn");
   });
});

вы также можете использовать метод switchClass() - он позволяет анимировать переход добавления и удаления классов в одно и то же время.

$(function () {
        $("#btnSubmit").click(function () {
            $("#btnClass").switchClass("btn", "btnReset", 1000, "easeInOutQuad");
        });
    });