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

请看这个小提琴 。

我正在尝试添加和删除点击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

其他李元素不是a元素的兄弟姐妹。

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

Answer 3

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

 $('#menu li a').on('click', function(){ $(this).addClass('current').parent().siblings().find('a').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

你可以尝试一下，这可能有助于在较大的function上提供较短的代码。

$('#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

这里是一个带有实时工作演示 类animation在JQuery中的文章

你可以试试这个，

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

您也可以使用switchClass（）方法 – 它允许您同时添加和删除类的animation。

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