Jquery改变CSS类点击

Jquery change CSS class on clicking

本文关键字：CSS 改变 Jquery 更新时间：2023-09-26

我正在做一个项目，我有一些锚，比如标签，每个都有一些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>

您不需要在这里使用each，在具有btn类的元素的click上删除具有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");        
});

Edit:您可以通过保留最后选择的元素并更改它的类来改善这一点。

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

`$.each()`的错误用法

这样使用:

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

应该可以做到:

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

还有另一种方法:

$(".btn").click(function (e) {
   e.preventDefault();
   $(this).siblings().removeClass("course-btn-tab-selected").addClass('course-btn-tab');
   $(this).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的工作示例:jsFiddle

Jquery改变CSS类点击

Jquery change CSS class on clicking

$.each()的错误用法

`$.each()`的错误用法