data-active 属性必须设为 data-active="true" 或 data-active="false"，命名全小写连字符，JS 读写需用 getAttribute()/setAttribute()，CSS 用 [data-active="true"] 匹配，它仅作静态状态标记，不具响应式能力。
data-active 属性怎么设才有效
必须写成 data-active="true" 或 data-active="false"，不能用 data-active（无值布尔写法）或 data-active="1"。浏览器只识别字符串值，且 CSS 选择器如 [data-active="true"] 会严格匹配字面量。命名必须全小写加连字符，data-Active、data_active、dataActive 全部无效，JS 里 element.dataset.active 会返回 undefined。
JavaScript 读写 data-active 的正确姿势
读取推荐统一用 getAttribute()，写入必须用 setAttribute()：
-
element.getAttribute('data-active') === 'true'—— 安全可靠，始终反映真实 DOM 值 -
element.setAttribute('data-active', 'true')—— 真正更新 HTML 属性，DevTools 可见 - 避免
element.dataset.active = 'true'：它只改内存快照，不写入 DOM，SSR 后状态极易脱节 - 删除用
element.removeAttribute('data-active')，delete element.dataset.active无效
CSS 如何响应 data-active 变化
data 属性变更本身不触发重绘，但你可以用属性选择器绑定样式：
- 写法：
[data-active="true"] { background: #007bff; color: white; } - 值含特殊字符（如
data-status="pending:review"）必须加引号：[data-status="pending:review"] - 不要依赖
:has([data-active="true"])做父级样式——目前仅 Safari 支持，Chrome/Firefox 尚未稳定 - 若需动画效果（如切换时淡入），得配合
class控制过渡，data-active只负责标记状态
为什么不能把 data-active 当 React state 用
它只是静态标记，没有响应式能力：
立即学习“前端免费学习笔记（深入）”；
- 多个导航项共享同一状态（比如点击 A 时 B 要取消 active）？
data-active不广播、不通知，必须手动遍历 DOM 清除其他项 - 状态要存 localStorage 持久化？
data-active刷新即丢，得额外用localStorage.setItem('nav-active', 'home')同步 - 服务端渲染后客户端 JS 修改了
data-active，但框架没监听属性变化，首屏与交互后状态就错位 - 真正该交由 JS 变量管理：用一个
let currentNav = 'home'统一控制，再批量同步到 DOM 和存储
data-active 最适合的场景，是单个导航元素自身可推导的瞬态状态——比如当前激活项高亮、折叠菜单是否展开。一旦涉及跨元素联动、持久化或异步加载，就得立刻退回到 JavaScript 变量 + 显式同步的模式。
