Question

我创建了两个名为tab1和tab2的标签。将鼠标悬停在tab1或tab2上时，将显示tab1和tab2的相应详细信息。它的工作就像一个魅力。这个的代码是，

<div id="wrapper">
    <ul class="tabs">
        <li class="active"><b>Tab1</b></li>
        <li class=""><b>Tab2</b></li> 
    </ul>
</div>

<div class="tab-container">
    <div class="tab-content" style="display: none; opacity: 1;">     
        Tab1
    </div>
    <div class="tab-content" style="display: none; opacity: 1;">     
        Tab2
    </div>
</div>

<script type='text/javascript'>
(function($) {
$(document).ready(function() {
$('.tab-content:eq(0)').show();
$('#tab1').show();
$('ul.tabs li').mouseover(function() {
var i = $(this).index();
$('ul.tabs li').removeClass('active');
$(this).addClass('active');
$('.tab-content').hide();
$('.tab-content').eq(i).fadeTo(300,1);
return false;
});
});
})(jQuery);
</script>

对于tab1和tab 2，我用小css来区分它们，css如下所示，

.tabs{
overflow:hidden;    
}

.tabs li{
list-style: none;
float: left;
padding: 7px 36px;
background: #D2161E;
color: #fff;
cursor:pointer; 
}

.tabs li.active{
background:#000;    
}

好的，当我刷新包含此jquery选项卡的网站时，两个tab1和tab2显示相同的颜色#D2161E。如何为tab1

默认区分类名.active颜色

Tabbed Widget活动类的问题

0 个答案: