HTML横向导航菜单选中状态设置教程-html教程-PHP中文网

必须由开发者显式标记class="active"，浏览器不会自动识别当前页面菜单项；常见做法是服务端渲染时注入，或前端JS动态匹配location.pathname后添加该类。

html横向导航菜单选中状态设置教程

选中状态不是靠 CSS 自动识别的，必须由开发者显式标记——class="active" 是最直接、最可控的方式，其他方案要么不可靠，要么增加复杂度。

怎么给当前页面菜单项加 active 类

浏览器不会自动判断哪个对应当前 URL，得手动加。常见做法是服务端渲染时注入，或前端 JS 动态匹配 location.pathname 后添加 class="active"。

静态页面：直接在对应
或上写死 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 必须加在触发样式的元素上（通常是），而不是

，除非你写的样式规则明确针对 li.active a。

检查是否写了 a.active { ... } 却把 class 加在了
上
确认没有更具体的规则（如 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 DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载