使用jQuery點擊添加和刪除類？

Question

請參閱fiddle。

我想添加和刪除單擊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

你申請你的類的<a>元素，這是不是兄弟姐妹，因爲他們每個封裝在一個<li>元素。你需要將樹移到父節點<li>並找到該級別的兄弟元素。

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

看到這個updated fiddle

Answer 4

你可以這樣做： -

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

演示：Fiddle

Answer 5

你可以沿着試試這個，它可能有助於給大短代碼功能。

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

Answer 6

在網站的你的腦袋節試試這個：

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

Answer 7

這裏是一個文章與帶電作業演示Class Animation In JQuery

你可以試試這個，

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

您還可以使用switchClass（）方法 - 它允許您同時添加和刪除類的動畫。

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