键盘上下键选择列表项的核心是监听keydown事件并拦截默认行为，通过维护selectedindex变量控制高亮项，结合tabindex="0"使列表项可聚焦，用event.key判断方向键，动态更新active类和焦点位置。
用键盘上下键选择列表项，核心是监听 keydown 事件，结合对焦点（focus）或选中状态（如 class）的控制来实现。不需要额外库，原生 JavaScript 就能完成。
监听键盘事件并拦截默认行为
给容器（比如 <ul></ul> 或外层 <div>）绑定 <code>keydown，重点响应 ArrowUp 和 ArrowDown 键。注意调用 event.preventDefault() 防止页面滚动等默认行为干扰：
- 只在容器获得焦点（或处于可交互状态）时响应按键
- 用
event.key === 'ArrowUp'或'ArrowDown'判断方向 - 避免用 keyCode / which（已废弃），统一用
event.key
维护当前选中索引并更新 UI 状态
用一个变量（如 selectedIndex）记录当前高亮项的下标，初始设为 -1 或 0。每次按键后更新该值，并同步修改 DOM：
- 向上：`selectedIndex = Math.max(0, selectedIndex - 1)`
- 向下：`selectedIndex = Math.min(items.length - 1, selectedIndex + 1)`
- 遍历所有列表项（
querySelectorAll('li')），移除所有active类，再给对应索引项添加 - 可选：自动将焦点移到当前项（
items[selectedIndex].focus()），方便后续回车触发
确保列表项可聚焦（支持键盘导航）
默认 <li> 不可聚焦，需显式设置 tabindex="0"：
<li tabindex="0">选项一</li>这样不仅能用键盘选中，还能被屏幕阅读器识别，也便于用 .focus() 控制焦点位置。如果使用 <button></button> 或 <a></a> 替代 <li>，它们天然可聚焦，更推荐。
完整最小示例（可直接运行）
HTML 结构：
- 苹果
- 香蕉
- 橙子
JS 逻辑：
const list = document.getElementById('list');
const items = list.querySelectorAll('li');
let selectedIndex = 0;
<p>// 初始化第一项高亮
items[selectedIndex]?.classList.add('active');</p><p>list.addEventListener('keydown', (e) => {
if (e.key === 'ArrowUp') {
e.preventDefault();
selectedIndex = Math.max(0, selectedIndex - 1);
} else if (e.key === 'ArrowDown') {
e.preventDefault();
selectedIndex = Math.min(items.length - 1, selectedIndex + 1);
} else {
return; // 不处理其他按键
}</p><p>// 更新样式
items.forEach((item, i) => {
item.classList.toggle('active', i === selectedIndex);
});</p><p>// 可选：聚焦到当前项，提升可访问性
items[selectedIndex]?.focus();
});</p>CSS 提示（可选）：
.active { background: #007bff; color: white; }
