動態突出顯示使用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）