javascript - Jquery 在点击时更改 CSS 类

Question

我正在做一个项目，我有一些像选项卡这样的 anchor ，每个 anchor 都有一些 CSS 类，选定的选项卡有单独的 css 类。我正在单击选项卡，我想将其 CSS 类更改为选定的 css 类我已经完成了此功能，但我遇到了一些问题，因为之前选择的选项卡也具有相同的类，我如何才能将之前选择的选项卡更改为未选择类，下面是我的代码

$(".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 类 btn 的元素上删除类 类的所有元素btn 并将所需的类分配给作为事件源的当前元素(由 $(this) 引用)。此外，我假设您想从以前的元素中删除 selected 类。

$(".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);           
});