如何让当前页面对应导航链接保持红色背景样式？

我完全理解你的困扰！:visited和:active这两个CSS伪类确实没法实现你想要的当前页面对应的链接始终保持红色背景的需求，正如你所说的：

• :active仅在鼠标按下链接的瞬间生效，松开后就会恢复原状
• :visited会标记所有用户点击过的链接，哪怕你跳去了其他页面，之前点击过的链接依然会保留这个状态，没法只高亮当前所在页面的那一个链接

要解决这个问题，我们通常有两种靠谱的方案：

方案1：服务器端动态添加激活类（推荐） #

这是最稳定的实现方式。当服务器渲染页面的时候，会判断当前用户访问的是哪个页面，然后给对应的链接加上一个自定义的类（比如active）。

举个例子，当用户访问/page-2时，服务器输出的HTML会是这样：

<a class="link1" href="/page-1">Link 1</a> 
<a class="link2 active" href="/page-2">Link 2</a> 
<a class="link3" href="/page-3">Link 3</a> 
<a class="link4" href="/page-4">Link 4</a>

然后你只需要在CSS里给这个active类定义样式就行：

.active {
  background-color: red;
}

这样，用户打开哪个页面，对应的链接就会一直保持红色背景，完全符合你的需求。

方案2：前端JavaScript动态判断（纯静态页面适用） #

如果你的项目是纯静态页面，没法用服务器端渲染，那可以用JavaScript来实现。思路是页面加载时，判断当前页面的URL，然后给匹配的链接加上激活类。

示例代码： #

// 获取当前页面的路径（比如 "/page-2"）
const currentPagePath = window.location.pathname;

// 遍历所有导航链接
document.querySelectorAll('a[href^="/page-"]').forEach(navLink => {
  // 检查链接的href是否和当前页面路径一致
  if (navLink.getAttribute('href') === currentPagePath) {
    navLink.classList.add('active');
  }
});

同样搭配CSS样式：

.active {
  background-color: red;
}

页面加载后，JS会自动给当前页面对应的链接加上active类，实现你要的效果。

小提示：如果你的URL带有参数（比如/page-2?id=1）或者哈希值（比如/page-2#section），可以调整判断逻辑，比如只比较路径部分，忽略后面的参数：

// 只取路径部分，去掉参数和哈希
const currentPath = window.location.pathname;
// 链接的href也只取路径部分（如果链接的href包含参数的话）
const linkPath = new URL(navLink.href).pathname;
if (linkPath === currentPath) {
  navLink.classList.add('active');
}

内容的提问来源于stack exchange，提问作者Ta La