javascript - 如何从链接中添加/删除类

Question

我正在使用 bootstrap 选项卡，我有四个。我希望它们有不同的颜色，当用户点击它们时应该改变颜色，bootstrap 有“事件”类，但它不起作用，因为我为每个选项卡使用不同的颜色，所以我决定使用 jquery 函数在用户单击选项卡时添加类，但我不知道如何在用户单击其他选项卡时删除类。

有没有办法将两个值传递给一个函数，一个值来自一个链接，另一个来自另一个链接，所以当我点击汽车时，我想从卡车中删除类，当我点击卡车时删除汽车类

HTML

<ul class="nav nav-tabs" role="tablist">
            <li class="active"><a href="#home" role="tab" data-toggle="tab">Link 1</a></li>
            <li><a href="#link2" role="tab" data-toggle="tab">Link 2</a></li>
            <li><a href="#link3" role="tab" data-toggle="tab" id="cars">Link 2</a></li>
            <li><a href="#link4" role="tab" data-toggle="tab" id="trucks" >Link 3</a></li>
          </ul>

CSS

#cars
{
    color: #FFF; 
    background: #ec7501;
    background: -moz-linear-gradient(top, #ec7501 1%, #c46200 56%, #ec7501 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ec7501), color-stop(56%,#c46200), color-stop(100%,#ec7501));
    background: -webkit-linear-gradient(top, #ec7501 1%,#c46200 56%,#ec7501 100%);
    background: -o-linear-gradient(top, #ec7501 1%,#c46200 56%,#ec7501 100%);
    background: -ms-linear-gradient(top, #ec7501 1%,#c46200 56%,#ec7501 100%);
    background: linear-gradient(to bottom, #ec7501 1%,#c46200 56%,#ec7501 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ec7501', endColorstr='#ec7501',GradientType=0 );
    border-top: 2px solid #de9d5b;
    border-bottom: 2px solid #a64800;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.activeTab
{
    color:#000 !important;
    background:#FFF !important;
}

JS根据 Ed Cottrell 的评论进行编辑，

('#cars, #trucks').on('click', function() {
    changeColor($(this)); // passes the element itself
});

function changeColor($elem)
{
    $('.activeTab').removeClass('activeTab'); // remove the class from elements that have it
    $elem.addClass('activeTab');
}

Answer 1

使用$(selector).removeClass(class) .此外，您不应该在 jQuery 中使用内联 onclick 触发器；请改用动态绑定(bind)。

例子:

$('#cars').on('click', function() {
    changeColor('cars');
});

$('#some_other_tab').on('click', function() {
    $('.activeTab').removeClass('activeTab'); // remove the class from elements that have it
    doSomethingElse();
});

编辑:根据您的评论，您需要这样的内容:

$('#cars, #trucks').on('click', function() {
    changeColor($(this).prop('id')); // passes the id of the element receiving the click
});

function changeColor(id)
{
    $('.activeTab').removeClass('activeTab'); // remove the class from elements that have it
    $('#' + id).addClass('activeTab');
}

更简单，跳过 id 部分:

$('#cars, #trucks').on('click', function() {
    changeColor($(this)); // passes the element itself
});

function changeColor($elem)
{
    $('.activeTab').removeClass('activeTab'); // remove the class from elements that have it
    $elem.addClass('activeTab');
}