真正能持久高亮导航链接的只有手动添加的class="active"，需在HTML中显式标记当前页链接，CSS用nav a.active设置背景色，SPA中须用JS监听popstate并动态切换active类。
点击导航链接时背景变色，本质是状态标记问题
不是“点一下就变色”，而是要让浏览器知道“哪个链接当前代表当前页面”。:active只在鼠标按下瞬间生效，松手即消失；:hover只响应悬停，不记录选择。真正能持久高亮的，只有手动加的 class，比如 class="active"。
HTML 中必须显式标记当前页链接
服务端渲染或静态页里，你得在对应 <a> 标签上直接写死 class="active"：
<nav> <a href="/home">首页</a> <a href="/about" class="active">关于</a> <a href="/contact">联系</a> </nav>
关键点：
- 别依赖 JS 自动判断路径——没有路由库时
window.location.pathname容易匹配不准（比如带查询参数、结尾有/、大小写等） - 不要用
id="active"—— id 必须唯一，多个导航项不能共用 - 如果用构建工具（如 Vite、Webpack），可让模板自动注入 active 类，但最终输出仍是静态 class
CSS 里用 .active 而不是 :active
写成这样才有效：
立即学习“前端免费学习笔记（深入）”；
nav a.active {
background-color: #007acc;
color: white;
}
常见错误：
- 写成
nav a:active→ 点击时闪一下就恢复 - 写成
nav .active（没限定a）→ 可能误中其他元素 - 背景色被
background简写覆盖 → 改用background-color单独设 - 没设
display: block或inline-block→a默认是 inline，背景色不填满高度
纯前端单页应用（SPA）需 JS 动态管理 active
若用原生 JS 模拟路由，必须监听 URL 变化并手动切换 class：
function setActiveLink() {
const path = window.location.pathname;
document.querySelectorAll('nav a').forEach(a => {
a.classList.toggle('active', a.getAttribute('href') === path);
});
}
window.addEventListener('popstate', setActiveLink);
setActiveLink(); // 初始执行
注意：
- 别在每次点击
<a>时用preventDefault()+ 手动改 DOM —— 这会破坏浏览器前进/后退和 SEO - 如果 href 是相对路径（如
about.html），而当前 URL 是/about，需统一归一化处理 -
popstate不捕获首次加载，所以必须手动调用一次setActiveLink()
最易被忽略的是：active 状态必须与真实 URL 一致，否则用户刷新页面后高亮丢失，且无障碍阅读器无法正确播报当前位置。
