Jquery在单击时更改CSS类 [英] Jquery change CSS class on clicking

问题描述

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

I am working on a project i am having some anchors like tab, each have some CSS class, the selected tab have separate css class. I am clicking on tab and i want to change its CSS class to selected css class i have done this functionality but i am having some problems with it is that previously selected tab also having same class, how can i change the previous selected tab to unselected class,Below is my code

$(".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 删除类 btn 的所有元素的类，并将所需的类分配给当前元素（由$（this）引用），其中是事件来源。此外，我假设您要从之前的元素中删除选定的类。

You do not need to use each here, on click of element with class btn remove class for all elements with class btn and assign the desired class to current element (referred by $(this)) which is event source. Also I assume you want to remove selected class from previous elements.

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

编辑你可以通过保留最后选择的元素并更改来改善这一点它是否适合你。

You can improve this by hold the last selected element and changing it class if it suits you.

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);           
});

这篇关于Jquery在单击时更改CSS类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！