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

Question

请查看此演示。 我正在尝试在被点击的li元素上添加和删除类。这是一个菜单，当单击每个li项时，我希望它获得类并移除所有其他li项的类。因此，一次只有一个li项具有类。这是我所做到的（请参见演示）。我不确定如何使“about-link”从class current开始，但是然后在单击其他li项目之一时将其删除？

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

- angela

Answer 1

为什么不试试这样做呢？

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

JSFiddle

- Jamie Taylor

---

太棒了。还能更好吗？ - JunKim

Answer 2

你可以尝试这个方法，它可能有助于在大型函数中缩短代码。

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

- Stanley Amos

Answer 3

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

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

- Sjerdo

Answer 4

你将类应用于<a>元素，但它们不是兄弟姐妹，因为它们各自被包含在<li>元素中。 你需要向上移动到父级<li>并在该级别的同级中查找`元素。

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

See this updated fiddle

- user1864610

Answer 5

你可以这样做：-

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

Demo: Fiddle

- palaѕн

Answer 6

您可以尝试这个：

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

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

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

- Barath Kumar

Answer 7

在您的网站Head部分尝试以下内容：

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

- user3664350

Answer 8

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

- Rajesh Doot