-1

CSS：

// Highlight to show that the user is viewing current tab.    
// css for the active tab

.HeaderTabs li.tab a { 
   display: block;    //anchor tab 
   padding: 12px 8px 12px 8px;
}

.HeaderTabs li.tab a:link {
   outline: none;  //link works 
   text-decoration: none;
}

.HeaderTabs li.tab a:hover {  //this works hovering over the text
   color: #A4C639;
   font-weight: bold;
}

.HeaderTabs li.tab a:active { //this doesnt work 
   color: #A4C639;
   font-weight: bold;
}
4

5 回答 5

5

:active选择器在元素处于活动状态时起作用，例如当您保持单击元素时，样式将应用，如果您想设置当前活动选项卡的样式，您需要为此使用 jQuery 或服务器端编程，您无法设置样式只需使用:active选择器，您当前的活动标签

更多参考

于 2012-10-08T09:53:35.710 回答
2

我认为您可能会混淆“活跃”的含义。CSS 中的 ':active' 指的是链接被点击时的状态（在某些浏览器中可能是几毫秒的问题）。如果您想让引用当前页面的选项卡看起来不同，您需要向其添加某种选择器并设置不同的样式。

于 2012-10-08T09:58:06.277 回答
1

当用户单击链接时，将在链接上设置活动状态。一旦用户释放点击，链接就不再活跃。如果您更改活动链接的颜色（与悬停状态不同的颜色），您将看到差异。

一旦使用 JavaScript 或在服务器端有效地选择了选项卡，您应该将自己的“选定”类添加到链接中。

于 2012-10-08T09:56:21.613 回答
1

我认为 :active 仅在您单击链接时起作用，当您 mouseUp 时，它不再“活跃”。

如果您希望该选项卡保持颜色，只需定义另一个类。

.activeTab {
color: #A4C639;
font-weight: bold;
}

并通过 javascript 或 jquery 将该类添加到选项卡中。

于 2012-10-08T09:58:22.653 回答
1

这个伪类匹配任何正在被激活的元素。例如，它适用于鼠标单击链接的持续时间，从按下鼠标按钮的点到再次释放鼠标按钮的点。伪类并不表示指向活动或当前页面的链接——这是 CSS 初学者常见的误解。

读这个

 li class="current"

.HeaderTabs li.tab a.current {
color: #A4C639; 
font-weight: bold; 
 }

CSS 中的附加注释不是用//Javascript 完成的。利用/* Cooment */

例子

HTML/标记

文件 =index.html

<ul>
<li class="current"><a href="index.html"</a>Home</li>
<li><a href="about_us.html"</a>About Us</li>
<li><a href="news.html"</a>News</li>
<li><a href="products.html"</a>Products</li>
<li><a href="contact_us.html"</a>Contact Us</li>
</ul>

文件 =abouts_us.html

<ul>
<li><a href="index.html"</a>Home</li>
<li class="current"><a href="about_us.html"</a>About Us</li>
<li><a href="news.html"</a>News</li>
<li><a href="products.html"</a>Products</li>
<li><a href="contact_us.html"</a>Contact Us</li>
</ul>

文件 =news.html

<ul>
<li><a href="index.html"</a>Home</li>
<li><a href="about_us.html"</a>About Us</li>
<li class="current"><a href="news.html"</a>News</li>
<li><a href="products.html"</a>Products</li>
<li><a href="contact_us.html"</a>Contact Us</li>
</ul>

文件 =products.html

<ul>
<li><a href="index.html"</a>Home</li>
<li><a href="about_us.html"</a>About Us</li>
<li><a href="news.html"</a>News</li>
<li class="current"><a href="products.html"</a>Products</li>
<li><a href="contact_us.html"</a>Contact Us</li>
</ul>

文件 =contact_us.html

<ul>
<li><a href="index.html"</a>Home</li>
<li><a href="about_us.html"</a>About Us</li>
<li><a href="news.html"</a>News</li>
<li><a href="products.html"</a>Products</li>
<li class="current"><a href="contact_us.html"</a>Contact Us</li>
</ul>

样式/CSS

li.current
{
color: #A4C639; 
font-weight: bold;
}

此外，您可能需要将 the 提供class="current"给 the<a>而不是<li>and 使用

a.current
{
color: #A4C639; 
font-weight: bold;
}
于 2012-10-08T09:59:14.810 回答