为什么 CSS :active on link 不会突出显示当前页面链接？

【问题标题】：Why CSS :active on link doesn't make the current page link highlighted?为什么 CSS :active on link 不会突出显示当前页面链接？
【发布时间】：2012-06-18 01:02:16
【问题描述】：

我有下面的代码列表到母版页

<div id="header">
            <ul>
                <li><a href="default.aspx">Home</a></li>
                <li><a href="page1.aspx">Page1</a></li>

            </ul>
        </div>

用css

#header a:hover {
    color: #AA1111;
    border-color: #AA1111;
}

#header a:active {
    color: #AA1111;
    border-color:#AA1111;
}

但当页面处于活动状态时，链接不会用颜色突出显示。

【问题讨论】：

两套颜色一样？
你有边框颜色，你有和边框吗？
第一个当鼠标悬停时是的，当链接处于活动状态时，颜色不会停留在所选菜单上
如果链接颜色在活动时改变，那就太好了

标签： javascript jquery css menu navigation

【解决方案1】：

:active 并不表示当前页面处于活动状态时链接会高亮显示。

:active 是鼠标点击和鼠标在链接上释放之间的链接状态。尝试在链接上按住鼠标以亲自查看。

要将当前页面的链接设置为不同的样式，您需要为当前页面链接指定不同的类并在 CSS 中定位该类。

如果您使用的是 .NET，我建议使用各种 CSS 菜单适配器/列表控件，它们可以选择指定当前页面菜单链接类。

【讨论】：

好的，我将我的代码替换为
Home

你需要.removeClass('selected')

【解决方案2】：

我认为您混淆了伪选择器:active 的含义。当您单击链接时，该 css 规则将适用。但是，如果该链接将您带到新页面，则锚点将不再活动。

您需要做的是根据您所在的页面向锚点添加一个类。所以，在 default.aspx 中你需要确保你有<a class="active" href="default.aspx">Home</a>。然后，您需要将您的 css 规则更改为 #header a.active。

【讨论】：

【解决方案3】：

您可能希望设置页面的方式：

#header li {}
#header li.active a {color: #AA1111; border-color:#AA1111;} 


<div id="header">
        <ul>
            <li class="active"><a href="default.aspx">Home</a></li>
            <li><a href="page1.aspx">Page1</a></li>

        </ul>
</div>

您需要根据哪个页面在li 上设置活动类。

演示：http://jsfiddle.net/lucuma/HT4U4/

【讨论】：