Javascript Jquery在单击时更改CSS类

我在一个项目上工作，我有一些锚像标签，每个都有一些CSS类，选择的标签有单独的CSS类。我点击了tab，我想把它的CSS类改为selected CSS类我已经完成了这个功能，但是我有一些问题，以前选择的tab也有相同的类，我如何把以前选择的tab改为unselected类，下面是我的代码

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

$（“.btn”）。每个（函数（）
{
$（这个）。单击（函数（）{
$（此）.removeClass（“课程btn选项卡”）.addClass（“已选择课程btn选项卡”）；
});
});

错误使用了

$。each（）

这样做：

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

---

您不需要在此处使用

每个
，在
上单击
类为
btn
的元素的
，为类为
btn
的所有元素删除类，并将所需的类分配给当前元素（
由$（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);           
});

我们应该这样做：

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

    });

首先，您需要使用jQuery选择器将单击事件绑定到“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的工作示例：
还有另一种方法：

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

我使用此代码，但仍然存在相同的问题，例如，如果选择A并单击B，它将更改B的类别，但A的类别保持不变。我如何检查以前的类别（或任何一个选项卡）是否已被选中？替换
if（$（this）.attr（'class'）==“course btn tab selected”）
尝试使用
if（$（this）.hasClass(“选择了课程btn选项卡”）
Great…节省了我的时间：）我使用此代码，但仍然存在相同的问题，例如，如果选择了A，我单击B，它将更改B类，但A类保持不变。OP说，“如果选择了A，我单击B，它将更改B类，但A类保持不变。”“.你也有同样的问题吗？