动态突出显示使用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悬停给出的鼠标是hovere元素，是有选择的

感谢球员类似的东西，

是的，我确实需要动态处理，所以我也告诉你的方式。我捕获该选项卡和类上的单击事件。在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定义的类激活。然后你可以使用CSS来创建。活性不同的颜色，大小，形状等

下面是一个例子（第一LI）：

HTML

<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）：

HTML

<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> 

下面是一个例子（第三LI）：

HTML

<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）