Question

请参阅此fiddle。

我正在尝试添加和删除单击的li元素上的类。这是一个菜单，当我点击每个li项目时，我希望它获得该类，所有其他li项目都删除了该类。因此，一次只有一个li项目具有该类。这是我有多远（见小提琴）。我不确定如何让'about-link'从类当前开始，但是当点击其他一个li项时它会被删除？

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

Answer 1

为什么不尝试这样的事情？

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

JSFiddle

Answer 2

其他li元素不是元素的兄弟元素。

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

Answer 3

你可以尝试这一点，它可能有助于在大函数上提供更短的代码。

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

Answer 4

您正在将您的课程应用于<a>元素，这些元素不是兄弟姐妹，因为它们都包含在<li>元素中。您需要将树向上移动到父<li>并在该级别找到兄弟姐妹中的`元素。

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

请参阅此updated fiddle

Answer 5

你可以这样做： -

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

演示：Fiddle

Answer 6

在网站的Head部分尝试此操作：

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

Answer 7

以下是文章，其中包含实时演示 Class Animation In JQuery

你可以试试这个，

src

你也可以使用switchClass（）方法 - 它允许你同时为添加和删除类的转换设置动画。

var appConfig={
    'Lang' : 'EN',
    'URL' : '/over/dose/app'
}

Answer 8

var selector = '.classname';
$(selector).on('click', function(){
    $(selector).removeClass('classname');
    $(this).addClass('classname');
});

使用jQuery在click上添加和删除一个类？

8 个答案: