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 延迟一次，以确保布局稳定，否则高亮条位置可能出现偏差。