Ajout et suppression de la classe pour les panneaux de l'onglet sélectionné

Question

Je dois ajouter la classe « selectedTab » et enlever la classe « notSelectedTab » à l'onglet cliqué et ajouter la classe « notSelectedTab » à tous les autres panneaux à onglets. Actuellement, le script donne à tous les onglets cliqués la classe 'selectedTab', j'apprécierais de me diriger dans la bonne direction. S'il vous plaît laissez-moi savoir si je peux fournir autre chose.

<style> 
/*Selected Tab*/ 
.selectedTab { 
    background-color:#CBD8E1;; 
    border-left: 1px solid rgb(69, 145, 193); 
    border-top: 1px solid rgb(69, 145, 193); 
    border-right: 1px solid rgb(69, 145, 193); 
    border-bottom: nonet; 
    color: rgb(69, 145, 193); 
    line-height: 0.5em; 
    padding: 8px 10px; 
} 
/*Non-Selected Tab*/ 
.notSelectedTab { 
    border: 1px solid rgb(69, 145, 193); 
    border-bottom: none; 
    background-color: rgb(69, 145, 193); 
    color: rgb(255, 255, 255); 
    line-height: 0.5em; 
    margin-top: -1px; 
    padding: 8px 10px; 
} 
.notSelectedTab:hover { 
    background-image: none; 
    background-color: rgb(69, 145, 193); 
    color: rgb(255, 255, 255); 
} 
</style> 


<script> 
$(document).ready(function() { 
$('ul.nav li a').click(
function(e) { 
    e.preventDefault(); // prevent the default action 
    e.stopPropagation(); // stop the click from bubbling 
    $(this).find('.selectedTab').removeClass('selectedTab').addClass('notSelectedTab'); 
    $(this).addClass('selectedTab').removeClass('notSelectedTab'); 
}); 

});</script> 

<!-- Nav tabs --> 
<ul class="nav nav-tabs" role="tablist"> 
    <li><a class="selectedTab" href="#home" role="tab" data-toggle="tab">Home</a></li> 
    <li><a class="notSelectedTab" href="#profile" role="tab" data-toggle="tab">Profile</a></li> 
    <li><a class="notSelectedTab" href="#messages" role="tab" data-toggle="tab">Messages</a></li> 
    <li><a class="notSelectedTab" href="#settings" role="tab" data-toggle="tab">Settings</a></li> 
</ul> 

<!-- Tab panes --> 
<div class="tab-content"> 
    <div class="tab-pane active" id="home">...</div> 
    <div class="tab-pane" id="profile">...</div> 
    <div class="tab-pane" id="messages">...</div> 
    <div class="tab-pane" id="settings">...</div> 
</div> 

Answer 1

Le problème avec votre code est que vous ne recevez pas le parent commun entre tous vos points d'ancrage lors du retrait de la classe. Essayez d'utiliser .closest() avant d'utiliser trouver:

$('ul.nav li a').click(
function(e) { 
    e.preventDefault(); // prevent the default action 
    e.stopPropagation(); // stop the click from bubbling 
    $(this).closest('.nav').find('.selectedTab').removeClass('selectedTab').addClass('notSelectedTab'); 
    $(this).addClass('selectedTab').removeClass('notSelectedTab'); 
}); 

Answer 2

Vous avez mal sélecteur pour ajouter notSelectedTab classe à l'élément sélectionné précédemment. utilisez:

$('ul.nav li a').click(
function(e) { 
e.preventDefault(); // prevent the default action 
e.stopPropagation(); // stop the click from bubbling 
$('.selectedTab').removeClass('selectedTab').addClass('notSelectedTab'); 
$(this).addClass('selectedTab').removeClass('notSelectedTab'); 
}); 

Working Demo

Answer 3

Vous pouvez simplifier avec une classe active sur l'étiquette li.

<li class="active">...</li> 

Dans le script ajouter active classe à l'élément en cours et enlever active classe de frères et soeurs:

$(this).addClass("active").siblings().removeClass("active"); 

Answer 4

<script> 
$(document).ready(function() { 
$('ul.nav li a').click(
function(e) { 
    e.preventDefault(); // prevent the default action 
    e.stopPropagation(); // stop the click from bubbling 
    $('.selectedTab').removeClass('selectedTab').addClass('notSelectedTab'); 
    $(this).addClass('selectedTab').removeClass('notSelectedTab'); 
}); 

});</script> 

devrait faire l'affaire.

Answer 5

JQuery

var tabLabels=$("ul li a"); 
tabLabels.click(function(e){ 
    e.preventDefault(); // prevent the default action 
    e.stopPropagation(); // stop the click from bubbling 
    tabLabels.removeClass("selectedTab notSelectedTab").not(this).addClass("notSelectedTab");    
    $(this).addClass("selectedTab"); 
}); 

DEMO