必须由开发者显式标记class="active"，浏览器不会自动识别当前页面菜单项；常见做法是服务端渲染时注入，或前端JS动态匹配location.pathname后添加该类。
选中状态不是靠 CSS 自动识别的，必须由开发者显式标记——class="active" 是最直接、最可控的方式，其他方案要么不可靠，要么增加复杂度。
怎么给当前页面菜单项加 active 类
浏览器不会自动判断哪个 <a></a> 对应当前 URL，得手动加。常见做法是服务端渲染时注入，或前端 JS 动态匹配 location.pathname 后添加 class="active"。
- 静态页面：直接在对应
<li>或<a></a>上写死class="active" - 后端模板（如 PHP / Django）：用逻辑判断当前路径，输出时插入该 class
- 前端 JS（轻量场景）：
document.querySelectorAll('nav a').forEach(a => { if (a.getAttribute('href') === location.pathname || location.pathname.startsWith(a.getAttribute('href').replace(/\/$/, '') + '/')) { a.classList.add('active'); } });
active 样式为什么没生效
最常见原因是 CSS 优先级被覆盖，或 class 没加对位置。注意：active 必须加在触发样式的元素上（通常是 <a></a>），而不是 <li>，除非你写的样式规则明确针对 li.active a。
- 检查是否写了
a.active { ... }却把 class 加在了<li>上 - 确认没有更具体的规则（如
nav ul li a:hover）压过了a.active - 避免用
!important挽救，应理清选择器层级，比如改用nav a.active - 如果用了
display: inline-block或flex布局，确保active状态下的背景/颜色变化视觉可见（比如加background-color或border-bottom）
用 :target 或 :visited 实现自动 active？
不能依赖。:target 只响应 URL 中的 fragment（如 #about），和导航项是否“当前页”无关；:visited 只能控制已访问链接的颜色，且现代浏览器为隐私限制，只允许设 color，不能改背景或尺寸，也无法用于逻辑判断。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
-
:target适合锚点跳转高亮，不适合顶部导航的“当前页”标识 -
:visited在 Chrome/Firefox 中已被阉割，连颜色都可能不准确，完全不可靠 - 想“自动”，就得自己比对路径——没有捷径
移动端点击后 active 状态丢失怎么办
真机测试常发现：点开菜单项跳转后，新页面里 active 没亮。根本原因是单页应用（SPA）未重置状态，或服务端没正确输出 class。
- 如果是纯 HTML 多页站点，确保每个页面里对应导航项都硬编码了
class="active" - 如果是 Vue/React，别只靠路由守卫改 class，要确保组件挂载时重新计算并应用
- 避免用 JS 在跳转前临时加 active，然后跳转后不清理——容易残留或错位
- 一个简单验证法：打开新页面，右键 → “查看页面源代码”，搜
active，看它是否真实存在于 HTML 中
真正麻烦的不是加 class，而是确保它出现在对的元素上、被对的 CSS 选中、且在每次页面加载时都准确存在——这些细节串起来，才是线上不出问题的关键。
