Question

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

​
​

Answer 1

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