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