CODEWITHSUNDEEP
jqueryjquery-ui-tabsaddclassremoveclass
squirc77
squirc77

Reputation: 73

Add and remove class for selected tab panels

I need to add the 'selectedTab' class and remove the 'notSelectedTab' class to the clicked tab and add the 'notSelectedTab' class to all the other tabbed panels. Currently, the script gives all clicked tabs the 'selectedTab' class, I would appreciate steering me in the right direction. Please let me know if I can provide anything else.

<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>

Upvotes: 0

Views: 5257

Answers (5)

Emil A.
Emil A.

Reputation: 3445

You can simplify it with an active class on the li tag.

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

In the script add active class to current element and remove active class from siblings:

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

Upvotes: 4

Hamix
Hamix

Reputation: 1335

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

Upvotes: 0

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33870

The problem with you code is that you are not getting the common parent between all of your anchors when removing the class. Try to use .closest() before using find : 

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

Upvotes: 0

Jay
Jay

Reputation: 2220

<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>

should do the trick.

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82241

You have wrong selector for adding notSelectedTab class to previously selected element. use :

$('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

Upvotes: 0

Related Questions