在jQuery和CSS

Question

操纵标签我有这些选项卡：

<ul class="tab-nav"> 
    <li class="wui-first"><a class="wui-link" href="index.html">Home </a></li> 
    <li class="tab-content"><a class="wui-link" href="#" rel="tabs1">Data1</a></li> 
    <li class="tab-content"><a class="wui-link" href="#" rel="tabs2">Data2</a></li> 
    <li class="tab-content"><a class="wui-link" href="#" rel="tabs3">Data3</a></li 
    <li class="tab-content"><a class="wui-link" href="#"rel="tabs4">Data4</a></li> 
</ul> 

CSS是这样的：

ul.tab-nav li a.selected { 

    background-color: #E8E8E8; 
    color: #980000 !important; 
    font-weight: bold; 
} 

这是HTML的一部分：

<div id="main_area"> 
    <div class="tab-content" id="tabs1"> 
     <div id="div1" class="vol"></div> 
     <div id="div2" class="vol"></div> 
     <div id="div3" class="vol"></div> 
     <div id="div4" class="vol"></div> 
    </div> 
</div> 

我喜欢创造一个只将CSS应用于选定选项卡并显示内容属于html main_area中该选项卡的脚本。 有人能帮助我吗？现在，我选择每个标签，css保持不变。当我在标签之间点击时，当前点击标签应该有.selected属性。其他人应该回到默认状态。

Answer 1

至于应用CSS到一个你点击，假设你使用jQuery试试这个：

$('.tab-nav li').click(function(){ 
    // remove selected class from any others 
    $('.selected').removeClass('selected'); 
    // add selected class to the one you clicked 
    $(this).addClass('selected'); 
}); 

拉上了正确的内容，我可能会做类似设置相同的相对内容div的属性，它是相应的选项卡。然后当你点击标签时，它可以得到rel，然后找到具有相同rel的下一个div。