我有以下代碼,我想使用css突出顯示當前選定的選項卡。動態突出顯示使用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;
}
你覺得我在做什麼錯誤??
是什麼讓它成爲一個標籤?你在用JS嗎? – hsalama 2012-08-15 21:06:06
你的問題沒有清楚地說明情況 你爲什麼不發佈jsfiddle? – rzr 2012-08-15 21:06:44
如果您使用的JS解決方案來實現這些選項卡,那麼你應該看看http://jqueryui.com/demos/tabs/ 它會自動給活動選項卡 – rzr 2012-08-15 21:08:16