简单的HTML5键盘导航元素

Question

我正在尝试将一些键盘导航(左箭头,右箭头和输入/空格选择)实现到我的网站中.我猜jQuery这将是必需的!这是我正在寻找的想法(见第一张图片).我希望能够使用"部分"所在的图像并突出显示当前选择.

有一个简单的方法吗？

此外,如果有一种简单的方法,我将如何将其扩展为以下内容:

jQuery根本不是我的领域.我在网上到处都看,我发现很难找到一种简单的方法来实现键盘控制到我的网站.任何链接或建议将不胜感激!

提前致谢.

Answer 1

你可以做到这一点,只需添加你想要的代码即可

  $(document).keydown(function(e) {
      switch(e.which) {
          case 37: // left
              moveInSectorToLeft();
          break;

         case 38: // up
             nothing(); //Dont know if you want to use it
         break;

         case 39: // right
             moveInSectorToRight();
         break;

         case 40: // down
             selectCurrentSection();
         break;

         default: return; 
     }
     e.preventDefault(); 
  });

你可以查看这个小提琴中的一个例子:https://jsfiddle.net/ew8Lnt83/