Jquery在单击时更改CSS类

我正在开发一个项目，我有一些像tab这样的锚，每个都有一些CSS类，所选的选项卡有单独的css类。 我点击选项卡，我想将其CSS类更改为选定的css类我已经完成了此function，但我遇到的一些问题是之前选择的选项卡也有相同的类，如何将以前选择的选项卡更改为未选中上课，下面是我的代码

$(".btn").each(function () { $(this).click(function () { $(this).removeClass("course-btn-tab").addClass("course-btn-tab-selected"); }); }); 
 A B C D  

Answer 1

你不需要在这里使用each ， click具有类btn的元素删除具有类btn的所有元素的类，并将所需的类分配给当前元素（ referred by $(this) ），这是事件源。 此外，我假设您要从以前的元素中删除选定的类。

 $(".btn").click(function () { if($(this).hasClass("course-btn-tab-selected")) $(".btn").removeClass("course-btn-tab-selected").addClass("course-btn-tab");; $(this).addClass("course-btn-tab-selected"); }); 

编辑：您可以通过保留最后选择的元素并在适合您的情况下更改它来改进这一点。

 previouslyClicked = $(".btn").eq(0); //Assuming first tab is selected by default $(".btn").click(function () { previouslyClicked.removeClass("course-btn-tab-selected").addClass("course-btn-tab"); $(this).addClass("course-btn-tab-selected"); previouslyClicked = $(this); }); 

Answer 2

错误使用$.each()

使用这种方式：

 $(".btn").click(function () { $(".btn").removeClass("course-btn-tab-selected"); $(this).addClass("course-btn-tab-selected"); }); 

Answer 3

应该做的诀窍：

 $(".btn").click(function () { $(".course-btn-tab-selected").removeClass("course-btn-tab-selected").addClass('course-btn-tab'); $(this).removeClass('course-btn-tab').addClass("course-btn-tab-selected"); }); 

Answer 4

还有另一种方式：

 $(".btn").click(function (e) { e.preventDefault(); $(this).siblings().removeClass("course-btn-tab-selected").addClass('course-btn-tab'); $(this).addClass("course-btn-tab-selected"); }); 

Answer 5

首先，您需要使用jQuery选择器将click事件绑定到“btn”CSS类，这将允许您一次操作所有按钮。

接下来找到之前选择的按钮，删除所选的类并添加常规类。

最后从单击的按钮中删除常规类并添加所选的类。

 $('.btn').bind('click', function () { var previouslySelectedButton = $('.course-btn-tab-selected'); var selectedButton = $(this); if (previouslySelectedButton) previouslySelectedButton.removeClass('course-btn-tab-selected').addClass('course-btn-tab'); selectedButton.removeClass('course-btn-tab').addClass('course-btn-tab-selected'); }); 

或者，这是一个使用HTML的工作示例： jsFiddle