Jquery在单击时更改CSS类

Question

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

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

<div class="course-Search-tabs">
    <a href="#" class="course-btn-tab-selected btn" id="a">A</a>
    <a href="#" class="course-btn-tab btn" id="b">B</a>
    <a href="#" class="course-btn-tab btn" id="c">C</a>
    <a href="#" class="course-btn-tab" id="d">D</a>
</div>

Answer 1

对于具有类的所有元素,您不需要在each此处使用click带有类btnremove类的元素,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);           
});