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，然后找到具有相同rel的下一个div。

在jquery和css中操作制表符

1 个答案: