Vanilla JS实现按上下方向键切换div元素active类选中状态

实现逻辑 #

• 定义变量存储当前激活元素的索引，同步点击和键盘操作的选中状态
• 封装公共的激活状态更新方法，避免逻辑重复
• 监听全局键盘按下事件，识别上下方向键，更新索引时做边界校验
• 兼容原有点击切换选中的逻辑，两种操作状态同步

完整实现代码 #

HTML 代码 #

<section>
  <div class="element">BOX</div>
  <div class="element">BOX</div>
  <div class="element">BOX</div>
  <div class="element">BOX</div>
  <div class="element">BOX</div>
  <div class="element">BOX</div>
</section>

CSS 代码 #

.element{
  background: gray;
  width:200px;
  padding:10px;
  margin-bottom:1px;
  cursor: pointer;
}

.element.active{
  background: red;
}

JS 代码 #

document.addEventListener("DOMContentLoaded", function(event) {
  const elements = document.querySelectorAll('.element');
  // 存储当前激活元素的索引：初始-1表示无默认选中，设为0则默认选中第一个
  let activeIndex = -1;

  // 公共方法：激活指定索引的元素
  function setActive(index) {
    // 先移除所有元素的激活状态
    elements.forEach(el => el.classList.remove('active'));
    // 索引合法时更新激活状态
    if (index >= 0 && index < elements.length) {
      elements[index].classList.add('active');
      activeIndex = index;
      // 可选配置：选中元素自动滚动到可视区域
      // elements[index].scrollIntoView({block: 'nearest'});
    }
  }

  // 原有点击切换逻辑，同步更新索引
  elements.forEach((el, index) => {
    el.addEventListener('click', function () {
      setActive(index);
    });
  });

  // 监听键盘事件
  document.addEventListener('keydown', function(e) {
    if (e.key === 'ArrowDown') {
      // 下方向键：索引+1，到末尾后默认跳回第一个，要停在末尾就替换为Math.min(activeIndex + 1, elements.length - 1)
      let nextIndex = activeIndex + 1 >= elements.length ? 0 : activeIndex + 1;
      setActive(nextIndex);
      // 阻止页面默认滚动行为，不需要可删除
      e.preventDefault();
    } else if (e.key === 'ArrowUp') {
      // 上方向键：索引-1，到开头后默认跳到最后一个，要停在开头就替换为Math.max(activeIndex - 1, 0)
      let prevIndex = activeIndex - 1 < 0 ? elements.length - 1 : activeIndex - 1;
      setActive(prevIndex);
      // 阻止页面默认滚动行为，不需要可删除
      e.preventDefault();
    }
  });
});

内容的提问来源于stack exchange，提问作者Sercan Aslan