0

我有以下代码，我想使用 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 hover给出了鼠标悬停的元素，是否有类似的选择

多谢你们，

是的，我确实需要动态处理，所以我按照你说的方式做了。我捕获了该选项卡和类上的点击事件。在 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;
}

你觉得我做错了什么？？

4

2 回答 2

0

我不确定您如何使用纯 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*/   
}
于 2012-08-15T21:12:12.113 回答
0

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

这是一个例子（第一个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)

于 2012-08-15T21:15:56.880 回答