Jquery 使用箭头键导航

有人知道使用jquery通过箭头键（向上、向下）浏览列表的解决方案吗

例如，如果我有一个带有链接的列表：

<a href="#">First Link</a>
<p>
<a href="#">Second Link</a>
<p>
<a href="#">Third Link</a>
<p>
<a href="#">Fourth Link</a>
<p>

---

谢谢！要进行实验：

用焦点替换悬停

然后，您可以使用jQuery将焦点移动到下一个和上一个链接，如下所示：

$(document).keydown(
    function(e)
    {    
        if($('a:focus').length==0){$('a').first().focus();}

        if (e.keyCode == 39) {      
            $("a:focus").next().focus();

        }
        if (e.keyCode == 37) {      
            $("a:focus").prev().focus();

        }
    }
);

---

更新的小提琴：

用焦点替换悬停

然后，您可以使用jQuery将焦点移动到下一个和上一个链接，如下所示：

$(document).keydown(
    function(e)
    {    
        if($('a:focus').length==0){$('a').first().focus();}

        if (e.keyCode == 39) {      
            $("a:focus").next().focus();

        }
        if (e.keyCode == 37) {      
            $("a:focus").prev().focus();

        }
    }
);

---

更新的fiddle:

在中测试的完全工作的代码段

HTML

JS

---

在中测试的完全工作的代码段

HTML

JS

---

---

这个问题的答案已经在这里了[1][1]：哦，谢谢！！但是有没有更短的代码呢？这里已经有了这个问题的答案[1][1]：哦，谢谢！！但是是否有较短的代码？请尝试将

e.keyCode

替换为

e.which

。可能是因为您没有焦点链接。您可以添加if（$（'a:focus'）.length==0{$（'a'）.first（）.focus（）；}更新的fiddle:谢谢，您真的帮了我很多忙抱歉，但我有一种感觉，您的代码只有在a是内联的情况下才能工作！当它们被分开时，该选项不起作用！这是因为您的HTML无效。您必须先关闭然后再打开另一个：）只需添加display:block；在类似的css中，尝试将

e.keyCode

替换为

e.which

。可能是因为您没有焦点链接。您可以添加if（$（'a:focus'）.length==0{$（'a'）.first（）.focus（）；}更新的fiddle:谢谢，您真的帮了我很多忙抱歉，但我有一种感觉，您的代码只有在a是内联的情况下才能工作！当它们被分开时，该选项不起作用！这是因为您的HTML无效。您必须先关闭然后再打开另一个：）只需添加display:block；在css中，这样做可以回答您的问题。如果是这样，您可以标记为已回答..这将是使用stackoverflow@Amith对不起，我仍然不知道FC的代码是否更好。它是否回答了您的问题。如果是这样，您可以标记为已回答..这将是使用stackoverflow@Amith对不起，我还是不知道FC的代码是否更好

<ul>
    <li><a href="#">First Link</a></li>
    <li> <a href="#">Second Link</a></li>
    <li> <a href="#">Third Link</a></li>
</ul>

li.selected {background:yellow}
a:hover{color:blue}
a {
  color:inherit;
  text-decoration: none;
 }
ul
{
    list-style-type: none;
}

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');
        }
    }
});