纯静态网站中导航高亮必须手动添加class="active"或aria-current="page"，浏览器不自动识别当前页；需在对应页面HTML中显式标记，并用CSS定义样式，兼顾语义与无障碍。
纯静态 HTML 网站里，浏览器不会自动给你当前页导航加高亮——active 类必须手动写、aria-current="page" 必须显式加，没有“默认生效”这回事。靠 CSS 伪类 :active 或 :current（根本不存在）都无效。
手动加 class="active" 最简单也最稳
适合页面少、不常改、托管在 Replit / GitHub Pages 这类纯静态环境的项目。核心就两步：在对应页面 HTML 中，把那个导航链接的 class 加上 active；再用 CSS 定义它的样式。
- 不要只写
class="active"，保持语义清晰，比如class="nav-link active" -
.nav-link.active的 CSS 规则优先级要高于普通.nav-link，避免被覆盖（可加!important应急，但推荐用更具体的选择器） - 每个页面都要单独检查：比如
about.html里，只有About这个链接带active，其他页面同理——漏改或重复加都会出错
用 aria-current="page" 更规范且无障碍友好
这是 WAI-ARIA 官方标准属性，屏幕阅读器能识别，比仅靠 class 更语义化。但它本身不触发样式，必须配合 CSS 属性选择器使用。
- HTML 写法：
<a href="/about" aria-current="page">About</a>（只加在当前页链接上，不是所有链接） - CSS 必须写：
a[aria-current="page"] { background-color: #007bff; color: white; } - 别同时写
class="active"和aria-current="page"——除非你真需要双重控制，否则冗余且易维护错 - 注意：不能写成
a[aria-current]，必须带值匹配"page"，否则会误匹配aria-current="step"等其它类型
JavaScript 动态匹配路径要防坑
页面多、不想手动维护时可用 JS 自动判断，但 window.location.pathname 直接比对容易翻车。
立即学习“前端免费学习笔记（深入）”；
- 用
new URL(link.href, window.location.origin).pathname标准化解析 href，避免相对路径/协议差异问题 - 做前缀匹配而非全等：比如当前是
/blog/post1，应高亮/blog而非只认死/blog/——否则子页面导航就失效 - 结尾加
/判断：匹配/about/时，要排除/about-us误中，可用path.startsWith(match + '/') || path === match - 查询参数（如
?ref=home）必须提前剥离，否则pathname不含它，比对永远失败
body 类 + 属性选择器是折中方案
适合不想写 JS、又嫌手动改每个页面太麻烦的中小站点。原理是给每个页面的 加唯一 class，再用 CSS 基于它定向高亮。
- 在
about.html中写：；在contact.html中写： - CSS 写：
body.page-about nav a[href="/about"], body.page-contact nav a[href="/contact"] { ... } - 缺点：CSS 规则随页面增多线性膨胀；路径改了就得同步改 class 和 CSS；无法处理动态路由（如
/user/123） - 优点：零 JS、无运行时、首次渲染即高亮，SEO 友好
真正容易被忽略的是路径标准化和语义一致性：手动方式怕漏，JS 方式怕匹配不准，aria-current 方式怕忘了配 CSS。选哪种不重要，关键是同一项目里别混用——比如一半页面靠 JS 加 active，另一半靠 body 类控制，后期谁也搞不清状态从哪来。
