使用jQuery将箭头键绑定到导航

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<nav>
  <ul>
    <li id="home">Home</li>
    <li id="about">About</li>
    <li id="services">Services</li>
    <li id="contact">Contact</li>
  </ul>
</nav>

$(document).keydown(function(e) {
  // 获取按下的键码
  var keyCode = e.keyCode || e.which;

  // 判断按下的是哪个箭头键
  switch (keyCode) {
    case 37: // 左箭头键
      // 执行导航向左的操作
      navigateLeft();
      break;
    case 39: // 右箭头键
      // 执行导航向右的操作
      navigateRight();
      break;
  }
});

function navigateLeft() {
  // 获取当前选中的导航项
  var currentNavItem = $('li.active');

  // 获取前一个导航项
  var prevNavItem = currentNavItem.prev('li');

  // 如果存在前一个导航项，则移除当前导航项的选中状态，并给前一个导航项添加选中状态
  if (prevNavItem.length) {
    currentNavItem.removeClass('active');
    prevNavItem.addClass('active');
  }
}

function navigateRight() {
  // 获取当前选中的导航项
  var currentNavItem = $('li.active');

  // 获取下一个导航项
  var nextNavItem = currentNavItem.next('li');

  // 如果存在下一个导航项，则移除当前导航项的选中状态，并给下一个导航项添加选中状态
  if (nextNavItem.length) {
    currentNavItem.removeClass('active');
    nextNavItem.addClass('active');
  }
}

li.active {
  background-color: #f00;
  color: #fff;
}