时间戳

首页 > 解决方案 > 可点击的 li 键盘导航链接

javascript - 可点击的 li 键盘导航链接

问题描述

我有一个 li 列表，您可以使用键盘箭头导航，它工作正常，但我希望能够使用键盘上的 enter 按钮单击链接。我还没有找到解决方案。

这是我使用的代码

var li = $('li');
var liSelected;
$(window).keydown(function(e) {
  if (e.which === 40) {
    if (liSelected) {
      liSelected.removeClass('selected');
      next = liSelected.next();
      if (next.length > 0) {
        liSelected = next.addClass('selected');
      } else {
        liSelected = li.eq(0).addClass('selected');
      }
    } else {
      liSelected = li.eq(0).addClass('selected');
    }
  } else if (e.which === 38) {
    if (liSelected) {
      liSelected.removeClass('selected');
      next = liSelected.prev();
      if (next.length > 0) {
        liSelected = next.addClass('selected');
      } else {
        liSelected = li.last().addClass('selected');
      }
    } else {
      liSelected = li.last().addClass('selected');
    }
  }
});
li {
  color: blue;
}

li.selected {
  background: yellow;
  color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#">First Link</a></li>
  <li> <a href="#">Second Link</a></li>
  <li> <a href="#">Third Link</a></li>
  <li> <a href="#">Third Link</a></li>
</ul>

标签： javascriptjqueryhtml

解决方案

回车键的键码为 13。因此，您可以在另一个else if子句中使用如下代码：

else if (e.which === 13) {
  if (liSelected) {
    $(liSelected).find('a')[0].click();
  }
}

推荐阅读