点击时更改Jquery CSS类

Question

我正在处理一个项目，其中有一些锚点，例如tab，每个都有一些CSS类，所选的tab有单独的CSS类。我点击tab并希望将其CSS类更改为所选的css类，我已经完成了这个功能，但我遇到了一些问题，以前选择的tab也具有相同的类，如何将先前选择的tab更改为未选择的类，以下是我的代码

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

- Syed Salman Raza Zaidi

Answer 1

这里不需要使用each，在具有class为btn的元素上click时，移除所有class为btn的元素的class，并将所需的class指定给当前元素（由$(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);           
});

- Adil

---

我使用了这段代码，但仍然存在同样的问题，例如如果选择了A并且我点击B，它会改变B的类别，但A的类别仍然保持不变。 - Syed Salman Raza Zaidi

我该如何检查前一个（或任何一个）选项卡的类是否被选中？ - Syed Salman Raza Zaidi

尝试使用 if($(this).hasClass("course-btn-tab-selected")) 替换 if($(this).attr('class') == "course-btn-tab-selected") - palaѕн

太好了...省下了我的时间 :) - Ravindra Kumar

Answer 2

$.each() 的错误使用方法

请按照以下方式使用：

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

- Praveen Kumar Purushothaman

---

我使用了这段代码，但仍然存在同样的问题，例如如果选择了A并且我点击B，它会改变B的类别，但A的类别仍然保持不变。 - Syed Salman Raza Zaidi

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

    });

- A. Wolff

Answer 4

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

- Jam

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

- Jai

---

现在看起来不错。OP说：“如果选择了A并且我点击B，它会更改B的类别，但A的类别保持不变”。你是否遇到了同样的问题？ - palaѕн