CODEWITHSUNDEEP
jquerycss
PHP
PHP

Reputation: 443

How to remove the default active tab color when another tab is active using jquery

Below is the code which i have used . default tab is tab1 which is in red color. when second tab is selected the first tab is still active .How to remove the first tab color when second tab is selected http://jsfiddle.net/JE3e5/12/

<ul class="rtabs"> 
    <li class="active-first"rel="tab1"> <span>Tab1</span></li>
    <li rel="tab2"> <span>Tab2</span></li>
    <li rel="tab3"><span> Tab3</span></li>
    <li rel="tab4" class="last"> <span>Tab4</span></li>
</ul>
<div class="tab_container"> 
 <div id="tab1" class="tab_content"> 
     <p><img src="images/cod.jpg"> <br />
     <strong>
     Call of Duty: Black Ops bears the series' standard superbly,
     delivering an engrossing campaign and exciting competitive multiplayer.
     </strong>
     </p>

  </div>

​css

 .rtabs                { list-style:none; position:relative;padding:0px; margin:20px 0px; font-size:0px; background:#FFF; width:639px; height:29px; display:block; }
.rtabs li         { cursor:pointer;list-style:none; padding:7px 13px; margin:0px;  height:15px; display:inline-block; background:#000; zoom:1; *display: inline; border- right:1px solid #000; }
.rtabs li rel            { cursor:pointer;color:#FFF; font-weight:bold; font-size:13px; text-transform:uppercase; }
.rtabs li span        { color:#BBB; font-weight:bold; font-size:13px; text-transform:uppercase; }
.rtabs li.first        { background:red; padding-left:18px; }
.rtabs li.last        { background:#000; padding-right:18px; border-right:0px; }
.rtabs .active        { background:red; }
.rtabs .active-last    { background:red; padding-right:20px; border-right:0px;}
.rtabs .active-first    { background:red;  padding-left:20px; }

.tab_container {
    border: 1px solid #999999;
    border-top: none;
    clear: both;
    float: left; 
    width: 100%;
    background: #FFFFFF;
}
.tab_content {
    padding: 20px;
    font-size: 1.2em;
    display: none;
}

jquery

$(document).ready(function() {

 $(".tab_content").hide();
 $(".tab_content:first").show(); 

 $("ul.rtabs li").click(function() {
    $("ul.rtabs li").removeClass("active");
    $(this).addClass("active");
    $(".tab_content").hide();
    var activeTab = $(this).attr("rel"); 
    $("#"+activeTab).fadeIn(); 
});
});

​ ​

Upvotes: 0

Views: 637

Answers (1)

bretterer
bretterer

Reputation: 5781

All you need to do is the same thing you are already doing but just add more removeClass() calls for the elements. check out the jsFiddle here for a quick example

Upvotes: 1

Related Questions