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

操作当前页面链接的外观是常见的 CSS 样式要求。为了将其与其他页面链接区分开来，用户通常喜欢交换文本和背景的颜色。以下是针对您的样式请求的全面解决方案：

CSS 样式

要设置当前页面链接的样式，请将以下 CSS 规则添加到您的样式表中：

li a {
  color: #A60500;
}

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

jQuery 脚本

提供的 jQuery 脚本允许您识别当前页面链接并动态向其添加类：

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

根据您的具体页面结构，您可能需要优化链接选择器 ($("[href]"))。例如，如果链接包含在 nav 元素中，您可以将选择范围缩小到 $("nav [href]")。

如果您的页面使用 URL 参数，您可以在比较链接以确保当前页面链接被识别：

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

这种方法无需单独修改每个页面的 CSS 样式。