使用 CSS 更改当前页面的链接颜色

Question

当前页面的一种样式链接与其他样式的链接有何不同？我想交换文本和背景的颜色。

HTML：

 <ul id="navigation">
    <li class="a"><a href="/">Home</a></li>
    <li class="b"><a href="theatre.php">Theatre</a></li>
    <li class="c"><a href="programming.php">Programming</a></li>
</ul>

CSS：

 li a{
    color:#A60500;
}

li a:hover{
    color:#640200;
    background-color:#000000;
}

原文由 Josh Curren 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

a:active ：当您单击链接并按住它时（ 激活！ ）。

a:visited ：当链接已经被访问时。

如果要突出显示当前页面对应的链接，可以为链接定义一些特定的样式 -

 .currentLink {
   color: #640200;
   background-color: #000000;
}

将此新类仅添加到相应的 li （链接），在服务器端或客户端（使用 JavaScript）。

原文由 N 1.1 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用 jQuery，您可以使用 .each 函数通过以下代码循环访问链接：

 $(document).ready(function() {
    $("[href]").each(function() {
        if (this.href == window.location.href) {
            $(this).addClass("active");
        }
    });
});

根据您的页面结构和使用的链接，您可能必须缩小链接的选择范围，例如：

 $("nav [href]").each ...

如果您使用的是 URL 参数，则可能需要去除这些参数：

 if (this.href.split("?")[0] == window.location.href.split("?")[0]) ...

这样您就不必编辑每个页面。

原文由 Taraman 发布，翻译遵循 CC BY-SA 3.0 许可协议