0

下面是我使用的代码。默认选项卡是 tab1，它是红色的。选择第二个选项卡时，第一个选项卡仍处于活动状态。选择“第二个”选项卡“选项”选项“选项”选项“ 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(); 
});
});

​ ​</p>

4

1 回答 1

1

您需要做的就是您已经在做的事情，只是添加更多removeClass()对元素的调用。在此处查看jsFiddle以获取快速示例

于 2012-07-22T15:07:52.503 回答