使用jQuery添加和删除点击类？答案

【问题标题】：Add and remove a class on click using jQuery?使用jQuery添加和删除点击类？
【发布时间】：2013-10-31 11:24:42
【问题描述】：

请看这个fiddle。

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

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

【问题讨论】：

标签： jquery html css class click

【解决方案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');
});

看到这个updated fiddle

【讨论】：

【解决方案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】：

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

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

【讨论】：

【解决方案7】：

你可以试试这个，

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

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

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

【讨论】：

【解决方案8】：

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

【讨论】：