CSS定位实现菜单项高亮的方法

先说几个核心判断。关于菜单高亮，很多开发者一开始容易混淆概念：CSS的定位只负责“视觉呈现”，真正决定哪个菜单项高亮的是类名切换。定位负责把高亮条画准，但谁来画、画在哪，是JavaScript或后端渲染决定的。

为什么不能用 :active 或 :target 实现持久高亮？

这两个伪类看起来很直接，但实际用起来漏洞很多。:active 只在鼠标按下瞬间生效，松开瞬间就消失了——完全没法持久表示“当前页面”状态。而 :target 匹配的是 URL 片段（比如 #about）对应的真实 id 元素，不是导航链接本身。你点击跳转后，:target 作用在目标 section 上，而非 a[href="#about"] 这个链接。想让 :target 影响导航项，必须依赖 DOM 顺序（比如用 section:target ~ nav a[href="#about"]），但这种写法脆弱、难以维护，而且完全不适合 SPA 路由的场景。

用 relative + absolute 实现滑动高亮条

这才是定位在高亮场景中最可控、最典型的用法：容器设 position: relative，内部加一个 div.highlight-bar 设 position: absolute，再由JavaScript动态设置它的 left 和 width。这里面有几个关键细节：

• .navbar 必须设 position: relative，否则高亮条会相对于 body 定位，脱离菜单范围
• 高亮条的 bottom、left、width 值需要从目标 li.active 的 getBoundingClientRect() 计算得出，注意减去 navbar 的 padding-left
• 别忘了加 transition，比如 transition: left 0.3s ease, width 0.3s ease，否则移动显得生硬
• 如果菜单项有 margin 或 border，计算宽度时建议用 offsetWidth 而非 clientWidth，避免差 1-2px

JavaScript 类名切换才是高亮核心

定位只是“画笔”，谁该被画、画在哪，取决于哪个元素有 active 类。这个类怎么来？

• 服务端渲染时，后端可以直接输出 关于
• 前端 SPA 中，监听 hashchange 或 popstate，解析当前路径，再用 document.querySelector('a[href="' + currentPath + '"]') 找到对应项并加类
• 需要警惕的是，直接用 location.pathname 匹配有时会出错：/about 和 /about/ 是不同的字符串，建议统一处理末尾斜杠
• 加类前先清除所有 .active：document.querySelectorAll('.nav a').forEach(el => el.classList.remove('active'))

最容易被忽略的一点：高亮条的定位依赖于菜单项的几何尺寸，而这些尺寸可能受到字体加载、图片异步渲染或 CSS font-display: swap 的影响。务必等 DOMContentLoaded 后再初始化定位计算，或者用 requestAnimationFrame 延迟一次确保布局稳定，否则高亮条位置可能有偏差。