点击后a标签没高亮是因为:visited仅记录历史访问状态，不表示当前激活；侧边栏需JS动态添加.active类并配合CSS控制样式，或服务端渲染预设class，同时应添加aria-current增强可访问性。
为什么点击后 a 标签没高亮？
因为浏览器默认只用 :visited 记录“是否访问过”，不是“当前选中”。侧边栏菜单需要的是「当前激活项」，它和历史访问状态无关，必须靠开发者手动控制。常见错误是只写 a:visited 期望它响应点击，结果点了没变化——:visited 不会因 JS 导航或 hash 变更而刷新，也不响应 location.hash 改变。
a 标签怎么标记“当前激活”？
最可靠的方式是 JS 动态加 class，配合 CSS 控制样式：
- 给每个
<a>加唯一href值（如#dashboard、#settings） - 监听
hashchange或页面加载时读取location.hash - 遍历所有菜单
a，匹配href和当前 hash，给匹配项加class="active" - CSS 写
a.active { background-color: #007bff; color: white; }
示例片段：
document.addEventListener('hashchange', updateActiveLink);
function updateActiveLink() {
const hash = location.hash || '#home';
document.querySelectorAll('#sidebar a').forEach(a => {
a.classList.toggle('active', a.getAttribute('href') === hash);
});
}
用 :target 能替代 JS 吗？
能，但限制极多：
立即学习“前端免费学习笔记（深入）”；
- 必须确保每个菜单项对应一个真实存在的、有高度/内容的
id元素（比如<section id="dashboard"></section>），不能只把id放在空<div>上 -
:target只对 URL 中的 fragment（即#xxx）生效，不响应 JS 的history.pushState或路由库跳转 - 无法处理初始无 hash 的情况（比如首次打开
/admin页面），需额外加默认激活逻辑 - CSS 只能写
a[href="#dashboard"]:target这类选择器，兼容性没问题，但语义上不如.active直观
移动端点击 a 激活态闪一下就消失？
这是 :active 伪类的正常行为——它只在手指按下的瞬间触发，松开就结束。你看到的“闪一下”其实是 :active 样式，不是激活态。真正要保留的「当前选中」必须靠 .active class 或服务端渲染时预设 class。另外注意：:hover 在 iOS Safari 上默认延迟触发，别依赖它做核心反馈。
