17370845950

正确做法是使用类名如active配合CSS设置背景色高亮，1. 给当前页面链接添加class="active"并用CSS定义样式；2. :active伪类仅在点击时生效，不适合持久选中状态；3. 可结合:hover提升交互体验；4. 也可用JavaScript根据URL自动添加active类实现自动高亮。

导航菜单中让选中项高亮，通常不是用 :active 来实现的，因为 :active 只在点击瞬间生效，松开鼠标就失效了。真正实现“选中状态高亮”需要结合 HTML 结构和 CSS 类控制，下面介绍正确做法。

1. 使用自定义类控制选中状态

最常见且可靠的方式是给当前页面对应的菜单项添加一个类，比如 active，然后用 CSS 设置背景色高亮。

CSS 样式：

nav a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: #333;
}

nav a.active {
  background-color: #007acc;
  color: white;
}

当前页面的链接加上 class="active"，就能保持高亮显示。

2. :active 的作用与局限

:active 是伪类，用于定义元素被点击时的样式，只在鼠标按下期间生效。适合做点击反馈，不适合表示“当前选中”。

示例：

nav a:active {
  background-color: #ff6b6b;
}

这个效果一闪而过，不能保留，所以不能用来标识“哪个页面正在被访问”。

3. 结合:hover增强交互体验

为了让菜单更友好，可以同时设置悬停和选中样式：

nav a:hover {
  background-color: #f0f0f0;
}

nav a.active {
  background-color: #007acc;
  color: white;
}

用户悬停时有反馈，当前页始终高亮，体验更完整。

4. 进阶：使用 JavaScript 动态添加 active 类（可选）

如果想自动高亮当前页面对应的菜单项，可以用 JavaScript 根据当前 URL 自动添加 active 类。

例如：

document.querySelectorAll('nav a').forEach(link => {
  if (link.href === window.location.href) {
    link.classList.add('active');
  }
});

这样不用手动写 class，也能实现自动高亮。

基本上就这些。要用 background-color 实现高亮，核心是使用类名（如 active）配合 CSS 控制，而不是依赖 :active 伪类。结构清晰，维护方便，兼容性也好。