Question

的 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;
}

Answer 1

当元素活动时，

:active选择器会生效，例如当您保持元素点击时，如果您愿意，则会应用这些样式设置当前活动选项卡，您需要使用jQuery或服务器端编程，只能使用:active选择器

来设置当前活动选项卡的样式

More Reference

Answer 2

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

Answer 3

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

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

Answer 4

我认为：当你点击链接时，只有当它不再“活动”时才有效。

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

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

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

Answer 5

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

Read This

 li class="current"

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

CSS中的附加注释不是使用//进行的，那就是Javascript。使用/* Cooment */

示例

<强> HTML / MARKUP

档案= 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; }

您可能需要将class="current"提供给<a>而不是<li>并使用

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

html a：主动不起作用？

5 个答案: