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的{​​{1}}元素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

首先，您需要使用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

Answer 5

还有另一种方式：

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