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

标签 javascript jquery html

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

Heres the code im using

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>

最佳答案

回车键的键码为 13。因此,您可以使用如下代码插入另一个 else if 子句:

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

关于javascript - 可点击的 li 键盘导航链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51648475/

相关文章:

html - 使用单页导航突出显示事件选项卡

javascript - getText 不是函数错误 - Protractor (javascript)

javascript - 未捕获的类型错误 : Cannot read property 'safari' of undefined

ajax - 从 jQuery.Post 获取响应内容类型

jquery - 选择 jQuery 中的每第 n 个元素?

javascript - 调用函数而不是重新加载页面

html - 如何垂直对齐图标字体

javascript - 如何在adobe pro文件的javascript函数中向文件名添加日期和时间?

javascript - 在外部 JavaScript 文件中使用 ResolveClientUrl()

javascript - YouTube 播放器 API onReady 未针对 www.youtube-nocookie.com 触发