如何使用jQuery通过方向键导航<li>元素？

当然可以给选中的元素添加类来实现键盘方向键导航，这是个很实用的交互方案，我给你整理了一套适配你结构的核心代码：

第一步：定义激活类的样式 #

先写个CSS类标记选中状态，让你能直观区分当前选中的元素：

.active-card-item {
  background-color: #f0f4f8; /* 自定义浅蓝灰背景 */
  border-radius: 4px;
  outline: 2px solid #2563eb; /* 高亮边框突出选中状态 */
}

第二步：核心JavaScript导航逻辑 #

这段代码会监听键盘方向键，维护当前选中元素的索引，动态添加/移除激活类：

// 获取所有列表项（如果想给<a>标签加类，把选择器改成'.card-list a'即可）
const cardItems = document.querySelectorAll('.card-list li');
let currentActiveIndex = 0;

// 初始化：默认选中第一个元素
if (cardItems.length > 0) {
  cardItems[currentActiveIndex].classList.add('active-card-item');
}

// 监听键盘按键事件
document.addEventListener('keydown', (event) => {
  // 只响应上下方向键
  if (!['ArrowUp', 'ArrowDown'].includes(event.key)) return;

  // 移除上一个选中元素的激活类
  cardItems[currentActiveIndex].classList.remove('active-card-item');

  // 更新选中索引，支持循环导航（到末尾按向下回到开头，开头按向上回到末尾）
  if (event.key === 'ArrowDown') {
    currentActiveIndex = (currentActiveIndex + 1) % cardItems.length;
  } else {
    currentActiveIndex = (currentActiveIndex - 1 + cardItems.length) % cardItems.length;
  }

  // 给新选中的元素添加激活类
  cardItems[currentActiveIndex].classList.add('active-card-item');

  // 可选：自动滚动到选中元素，避免长列表中元素超出视图
  cardItems[currentActiveIndex].scrollIntoView({ behavior: 'smooth', block: 'center' });
});

可选调整：关闭循环导航 #

如果你不想让导航循环，而是到边界就停止，把索引更新的逻辑改成这样：

if (event.key === 'ArrowDown') {
  currentActiveIndex = Math.min(currentActiveIndex + 1, cardItems.length - 1);
} else {
  currentActiveIndex = Math.max(currentActiveIndex - 1, 0);
}

小提示 #

• 你可以根据需求，把激活类加到<li>或者包裹它的<a>标签上，只要调整querySelectorAll的选择器就行。
• 样式部分完全可以自定义，比如改变字体颜色、添加阴影，只要能清晰区分选中状态就好。

内容的提问来源于stack exchange，提问作者Samet Erpik