如何從鏈接添加/刪除類

Question

我使用引導選項卡，我有四個。我希望他們有不同的顏色，每當用戶點擊它們時應該改變，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類基於埃德科特雷爾評論 編輯，

('#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觸發器;改爲使用動態綁定。

例子：

$('#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'); 
}