7

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

5 回答 5

21

您不需要在each此处使用 on clickof element with class btnremove class 所有具有类的元素，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);           
});
于 2013-01-08T10:19:39.140 回答
3

错误使用$.each()

使用这种方式：

$(".btn").click(function () {
    $(".btn").removeClass("course-btn-tab-selected");
    $(this).addClass("course-btn-tab-selected");        
});
于 2013-01-08T10:19:23.000 回答
1

应该做的伎俩：

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

    });
于 2013-01-08T10:23:08.487 回答
0

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

于 2013-01-08T10:39:53.547 回答
0

还有另一种方法：

$(".btn").click(function (e) {
   e.preventDefault();
   $(this).siblings().removeClass("course-btn-tab-selected").addClass('course-btn-tab');
   $(this).addClass("course-btn-tab-selected");        
});
于 2013-01-08T10:41:00.657 回答