使用 jQuery 在单击时添加和删除类？

Add and remove a class on click using jQuery?

提问by angela

Please see this fiddle.

请看这个小提琴。

I am trying to add and remove a class on li elements that are clicked. It is a menu and when one clicks on each li item I want it to gain the class and all other li items have the class removed. So only one li item has the class at a time. This is how far I have got (see fiddle). I am not sure how to make the 'about-link' start with the class current, but then it is remove when one of the other li items are clicked on?

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

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

回答by Jamie Taylor

Why not try something like this?

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

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

JSFiddle

JSFiddle

回答by Stanley Amos

you can try this along, it may help to give a shorter code on large function.

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

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

回答by Sjerdo

The other li elements are not siblings of the a element.

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

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

回答by Sjerdo

You're applying your class to the <a>elements, which aren't siblings because they're each enclosed in an <li>element. You need to move up the tree to the parent <li>and find the ` elements in the siblings at that level.

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

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

See this updated fiddle

看到这个更新的小提琴

回答by pala?н

You can do this:-

你可以这样做：-

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

Demo: Fiddle

演示：小提琴

回答by user3664350

Try this in your Head section of the site:

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

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

回答by Bharath Kumaar

Here is an article with live working demoClass Animation In JQuery

这是一篇带有JQuery 中的实时工作演示类动画的文章

You can try this,

你可以试试这个

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

you can also use switchClass() method - it allows you to animate the transition of adding and removing classes at the same time.

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

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

回答by Rajesh Doot

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