jquery - 使用jQuery添加和删除点击类？

Question

请看这个小提琴。

我正在尝试在单击的 li 元素上添加和删除一个类。这是一个菜单，当单击每个 li 项目时，我希望它获得类，而所有其他 li 项目都删除了类。所以一次只有一个 li 项目有这个类。这就是我已经走了多远（见小提琴）。我不确定如何使“关于链接”以当前类开头，但是当单击其他 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

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

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

Answer 3

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

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

Answer 4

你可以这样做：-

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

演示：小提琴

Answer 5

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

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

看到这个更新的小提琴

Answer 6

在网站的 Head 部分试试这个：

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

Answer 7

你可以试试这个

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

您还可以使用 switchClass() 方法 - 它允许您同时为添加和删除类的过渡设置动画。

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

Answer 8

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