Question

我在下面的代码中列出了母版页

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

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

Answer 1

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

:active是链接上发布的鼠标单击和鼠标之间的链接状态。尝试将鼠标放在链接上以便自己查看。

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

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

Answer 2

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

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

Answer 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/

为什么CSS：在链接上激活不会突出显示当前页面链接？

3 个答案: