应使用JavaScript动态控制aria-selected="true"并配合CSS [aria-selected="true"]样式，确保节点具备role="treeitem"和正确tabindex管理，兼顾操作同步性与可访问性，避免仅依赖_current类导致的语义缺失。
怎么给树形菜单节点加动态高亮？
动态高亮不是简单加个 class="current" 就完事——它必须和用户真实操作同步，且不破坏可访问性。核心是：用 JavaScript 控制 aria-selected="true" + CSS 响应这个状态，而不是只靠 class 切换。
- 直接写死
class="current"在 HTML 里只能做静态高亮，无法响应点击、键盘导航或异步加载后的选中 - 仅靠 CSS 的
:hover或:focus无法持久标记“已选中”状态，一移开就消失 - 忽略
aria-selected会导致屏幕阅读器读不出“这个节点已被选中”，违反 WCAG 2.1
选中节点的正确步骤
每一步都对应 DOM 状态更新和语义表达，缺一不可：
- 监听点击（或
Enter/Space键），拿到被点击的元素 - 调用
element.setAttribute('aria-selected', 'true')，同时把之前所有aria-selected="true"的节点设为"false" - 确保该节点有
role="treeitem"（否则aria-selected无效） - 用 CSS 写
[aria-selected="true"] { background-color: #e6f7ff; }，而不是.current类 - 如果支持多选，需额外处理
aria-multiselectable="true"和Ctrl+Click逻辑
为什么不能只用 _current 类？
因为 _current 是纯视觉标记，对辅助技术无意义；而树形菜单本质是交互控件，不是普通导航栏。浏览器不会把 class="_current" 当作“已选中”来通告屏幕阅读器，用户听到的仍是“水果，可展开”，而非“水果，已选中，可展开”。
更麻烦的是：当用键盘方向键移动焦点时，_current 类不会自动跟着焦点走——你得额外监听 keydown、判断焦点元素、再手动增删类，等于重复实现一套 aria-selected 的语义逻辑。
容易被忽略的细节
很多人加了 aria-selected 却没配 tabindex="-1"。结果焦点能落到节点上，但按 Tab 时跳过它——因为默认 不可聚焦。必须在初始化时给每个 role="treeitem" 加 tabindex="-1"，并在获得焦点时改为 tabindex="0"，失去焦点时切回 -1。这点不处理，键盘用户根本没法操作菜单。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
