新手指引按钮需用JavaScript控制类名实现持久高亮，配合语义HTML与多层CSS视觉信号（box-shadow、scale、cursor），并确保键盘可访问性与状态精准管理。
要让新手指引里的按钮真正“被看见”，不能只靠 :hover 或 :active——它们只闪一下，用户根本来不及反应。持久高亮必须靠 JavaScript 控制类名切换，配合语义清晰的 HTML 结构和最小侵入式 CSS。
用 classList.toggle 实现点击即高亮
这是最直接、兼容性最好、也最容易排查问题的方式。关键不是“加样式”，而是“标记状态”：
- 给每个引导按钮加一个统一 class，比如
guide-btn，再加 data 属性标识用途：data-step="1" - 绑定 click 事件时，先清除所有
is-highlighted类，再给当前按钮加上：btn.classList.add("is-highlighted") - 避免用
toggle，新手容易误点两次取消高亮；明确用add+ 全局remove更可控 - 如果按钮是动态插入（比如通过
innerHTML渲染），别在插入后反复addEventListener，改用事件委托：document.addEventListener("click", e => { if (e.target.matches(".guide-btn")) { ... } })
CSS 高亮样式别只改 background-color
纯色背景变化在浅灰/白底上对比度太低，用户可能完全没感知。真正有效的高亮需要多层视觉信号：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 用
box-shadow: 0 0 0 3px #2563eb, 0 0 0 6px rgba(37, 99, 235, 0.2)模拟焦点环——不改变布局，且和 Bootstrap / Tailwind 默认焦点样式一致 - 加
transform: scale(1.02)微调尺寸感（配合transition: all 0.15s ease） - 务必设置
cursor: pointer，否则移动端和部分桌面用户根本不知道这是可点元素 - 别用
outline: 2px solid #2563eb：它会破坏按钮对齐，且在高对比度模式下可能被系统强制覆盖
防止多次点击导致状态错乱
新手指引常有“下一步”按钮反复出现，或同一按钮在多个步骤中复用。这时 JS 状态管理很容易出 bug：
立即学习“前端免费学习笔记（深入）”；
- 不要依赖按钮文本内容判断步骤（比如
if (btn.textContent === "下一步")），文本可能被 i18n 或 DOM 修改覆盖 - 优先用
data-step或data-guide-id这类显式属性做状态锚点 - 如果指引支持回退，记得在“上一步”逻辑里同步重置对应按钮的
is-highlighted类，而不是只操作当前按钮 - 移动端要注意
touchstart触发比click早，若同时监听两者，需加event.preventDefault()防止 click 重复触发
最常被忽略的一点：高亮按钮必须能被键盘聚焦（tabindex="0"）且响应 Enter / Space 键。否则屏幕阅读器用户或仅用键盘操作的人，根本无法完成指引流程。这不是锦上添花，是基础可访问性底线。
