图标点击后保持高亮必须用 JavaScript 控制类名，因 :active 和 :hover 仅响应瞬时动作；需通过 JS 切换 is-active 类实现持久状态，并兼顾移动端 tap 高亮、可访问性及状态同步。
图标点击后保持高亮必须用 JavaScript 控制类名
CSS 的 :active 或 :hover 都无法维持“已选中”状态，它们只响应瞬时动作。图标高亮若需持久（比如菜单图标、工具栏按钮、步骤引导图标），本质是状态管理问题，必须靠 JS 切换类名。
常见错误包括：只写 .icon:hover { color: blue; }，结果鼠标移开就失效；或误以为 :checked 能用于任意图标——它只对 <input type="checkbox"> 和 <input type="radio"> 有效，且需配合相邻的 <label></label> 结构。
- 给图标元素加统一 class，例如
nav-icon，再配data-id="home"这类语义属性，方便后续状态锚定 - 绑定
click事件时，先清除所有同类图标的is-active类，再给当前目标添加：el.classList.add("is-active") - 若图标是 SVG 内联写法（
<svg><path></path></svg>），直接操作其父容器（如<button class="nav-icon"><svg>...</svg></button>）更稳妥，避免样式穿透混乱 - 动态渲染的图标（如通过
innerHTML插入），别在每次插入后重复addEventListener，改用事件委托：document.addEventListener("click", e => { if (e.target.matches(".nav-icon")) { ... } })
SVG 图标用 fill 或 stroke 实现平滑高亮过渡
纯色图标（尤其 SVG）高亮最自然的方式是改 fill 或 stroke 值，配合 transition 实现渐变效果。直接改 background-color 对 SVG 无效，因为 SVG 本身不占背景区域。
注意：不要在 :active 或 :hover 里写 transition: all 0.3s —— 它会把所有属性都过渡，包括未定义变化的 opacity 或 transform，造成意外抖动。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
.nav-icon svg { transition: fill 0.15s ease, stroke 0.15s ease; } -
.nav-icon.is-active svg { fill: #2563eb; stroke: #2563eb; }（颜色值按主题调整） - 如果图标含多层路径（
<path></path>、<circle></circle>），确保 selector 覆盖到具体子元素，例如.nav-icon.is-active svg path - 避免用
!important强行覆盖，优先检查 CSS 权重：内联 style > ID > class > element，很多“不生效”其实是被更高权重规则压住了
移动端图标点击无反馈？先关掉 -webkit-tap-highlight-color
iOS Safari 和部分安卓浏览器默认会在点击时叠加一层半透明灰色遮罩，盖住你的 :active 样式，导致“点了没反应”的错觉。这不是 JS 没绑上，而是视觉被系统遮罩吃掉了。
解决只需一行 CSS：button.nav-icon, .nav-icon { -webkit-tap-highlight-color: transparent; }。但要注意：这个声明必须加在图标容器上（如 <button></button> 或带 cursor: pointer 的 <div>），不能只写在 <code><svg></svg> 上——SVG 元素本身不触发 tap 事件。
- 同时务必设置
cursor: pointer，否则移动端用户无法感知可点性 - 如果图标嵌套在
<a></a>中，a默认有-webkit-tap-highlight-color，也得单独设为transparent - 不建议用
touchstart替代click来规避延迟——它会导致 click 事件重复触发，反而更难维护
键盘和屏幕阅读器用户怎么高亮图标？别漏 tabindex 和 aria-current
仅靠鼠标点击高亮，等于把键盘用户和屏幕阅读器用户排除在外。图标若代表当前页面/步骤/视图，必须支持 Tab 聚焦，并响应 Enter 或 Space 键。
最简方案是：给图标容器加 tabindex="0"，监听 keydown 事件判断是否为 Enter（key === "Enter"）或 Space（key === " "），然后执行和 click 相同的类名切换逻辑。
- 对于语义明确的“当前项”，建议用
aria-current="page"（页面级）或aria-current="step"（步骤级），比纯 CSS 类更利于辅助技术识别 - 别用
outline: none去掉焦点环——这是可访问性红线。可用outline: 2px solid #2563eb+outline-offset: 2px保证视觉清晰且不破坏布局 - 如果图标本身没有文字内容（如纯 SVG），加
aria-label，例如aria-label="首页"，否则屏幕阅读器读不出含义
