0

我有这些标签：

<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 属性。其他人应该回到默认状态。

4

1 回答 1

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 属性。然后当你点击tab时，它可以得到rel，然后找到下一个具有相同rel的div。

于 2013-02-20T18:23:12.483 回答