我有一个 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>
最佳答案
回车键的键码为 13。因此,您可以使用如下代码插入另一个 else if
子句:
else if (e.which === 13) {
if (liSelected) {
$(liSelected).find('a')[0].click();
}
}
关于javascript - 可点击的 li 键盘导航链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51648475/