如何使用jquery在另一個選項卡處於活動狀態時刪除默認的活動選項卡顏色

下面是我使用的代碼。默認選項卡是tab1，它是紅色的。當選擇第二選項卡中的第一個選項卡仍處於活動狀態。如何去除第一標籤的顏色，當選擇了第二選項卡http://jsfiddle.net/JE3e5/12/如何使用jquery在另一個選項卡處於活動狀態時刪除默認的活動選項卡顏色

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

來源

2012-07-22 PHP

我認爲這可以通過[由jquery添加和刪除類]（http://api.jquery.com/addClass/） – 2012-07-22 15:06:01

所有你需要做的是同樣的事情你是一個現在已經在做，但只需添加更多removeClass()調用元素。看看這裏jsFiddle一個簡單的例子

來源

2012-07-22 15:07:52 bretterer

如何使用jquery在另一個選項卡處於活動狀態時刪除默認的活動選項卡顏色

回答

相關問題