使用css动态突出显示选项卡

Question

我有下面的代码，我想用css突出显示当前选中的选项卡。

<div id="Maintabs">
  <ul class"tablist">
    <li><a href="AshukuWeb.jsp?VIEW=Summary"  target=_top>Summary</a></li>
    <li><a href="AshukuWeb.jsp?VIEW=Advanced" target=_top>Advanced</a></li>
    <li><a href="AshukuWeb.jsp?VIEW=Expert" target=_top>Expert</a></li>
 </ul>
</div>

有什么办法我能做到吗？我知道css悬停给出鼠标悬停的元素，对于所选的元素是否有相似之处？

谢谢各位，

是的，我确实需要动态处理，所以我照你说的做了。我捕获了该选项卡和类上的click事件。在css中，我将所需的样式应用于该类，但它不起作用。

这是我的代码：

在javaScript中：

  $('#summary').click(function(){
              $(this).addClass("selected");
        alert(" summary");
          });

HTML代码：

<div id="Maintabs">
        <ul>
            <li style="width: 100px;"><a id="summary" href="AshukuWeb.jsp?VIEW=Summary"  target=_top>Summary</a></li>
            <li style="width: 100px;"><a id="advanced" href="AshukuWeb.jsp?VIEW=Advanced" target=_top>Advanced</a></li>
            <li style="width: 100px;"><a id="expert" href="AshukuWeb.jsp?VIEW=Expert" target=_top>Expert</a></li>
        </ul>
        </div>

CSS代码：

.selected{
    background-color:#FEE0C6;
}

你认为我做错了什么？？

Answer 1

我不知道你是如何使用纯CSS来产生标签效果的。您通常需要Javascript或jQuery来动态更改当前选项卡。

但是，如果您使用Javascript或jQuery作为选项卡效果，您可以简单地添加一个类来突出显示所选选项卡。

例如，这可能是您的jQuery：

$("#tab1").addClass("selected-tab");

这是你的CSS：

.selected-tab
{
    /*Some style to highlight it and show it's the selected tab*/   
}

Answer 2

你会想要做一个活跃的课程。通过赋予您的li定义的类active。然后，您可以使用css使.active具有不同的颜色、大小、形状等。

下面是一个示例(第一个li)：

<div id="Maintabs">
  <ul class"tablist">
    <li class="active"><a href="AshukuWeb.jsp?VIEW=Summary"  target=_top>Summary</a></li>
    <li><a href="AshukuWeb.jsp?VIEW=Advanced" target=_top>Advanced</a></li>
    <li><a href="AshukuWeb.jsp?VIEW=Expert" target=_top>Expert</a></li>
 </ul>
</div>

下面是一个示例(第二个li)：

<div id="Maintabs">
  <ul class"tablist">
    <li><a href="AshukuWeb.jsp?VIEW=Summary"  target=_top>Summary</a></li>
    <li class="active"><a href="AshukuWeb.jsp?VIEW=Advanced" target=_top>Advanced</a></li>
    <li><a href="AshukuWeb.jsp?VIEW=Expert" target=_top>Expert</a></li>
 </ul>
</div>

下面是一个示例(第三层)：

<div id="Maintabs">   <ul class"tablist">
    <li><a href="AshukuWeb.jsp?VIEW=Summary"  target=_top>Summary</a></li>
    <li><a href="AshukuWeb.jsp?VIEW=Advanced" target=_top>Advanced</a></li>
    <li class="active"><a href="AshukuWeb.jsp?VIEW=Expert" target=_top>Expert</a></li>  
 </ul> 
</div>

CSS

#maintabs.active {background-color: #000;}
#maintabs {background-color: #ccc;}

结果是活动选项卡为黑色(#000)，非活动选项卡为淡灰色(#ccc)。