不能用:active伪类标记当前页面，因为它仅在点击时生效且无法持久；正确做法是通过class="active"手动或用JavaScript根据URL动态添加样式，实现导航项的持续高亮。

在制作网页导航栏时，给当前页面对应的菜单项添加特殊样式（比如高亮、加粗等）是很常见的需求。很多人误以为可以用 :active 伪类来实现这个效果，但其实这是个误解。:active 是用于元素被点击的瞬间状态，而不是标识“当前页面”的长期状态。

为什么不能用 :active 来标记当前项？

:active 伪类只在用户按下鼠标但还没释放时生效，属于临时交互状态。一旦点击结束，样式就消失了，无法持续标识当前所在页面。

举个例子：你点击“首页”链接时，:active 生效，但页面一刷新或跳转完成，这个状态就没了，根本达不到“高亮当前页”的目的。

正确做法：使用 class="active" 手动控制

最稳定可靠的方式是，在当前页面对应的导航项上手动添加一个类，比如 active，然后通过 CSS 定义它的样式。

java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载

立即学习“前端免费学习笔记（深入）”；

•   首页
•   关于
•   联系

CSS 样式可以这样写：

.active {
  color: #fff;
  background-color: #007acc;
  font-weight: bold;
}

如何简化多个页面的 active 管理？

如果每个页面都要手动改 HTML，确实麻烦。可以通过以下方式优化：

• 使用服务器端模板（如 PHP、Jinja、Node.js 模板引擎），根据当前 URL 自动输出带 active 类的标签。
• 用 JavaScript 动态判断当前页面路径，自动为匹配的链接添加 active 类。
• 例如 JS 实现：

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

基本上就这些。别再纠结 :active 了，它不是干这个的。用 class 标记当前项，灵活又可控，不管是手写还是自动处理都行得通。不复杂但容易忽略细节。