1

有人知道使用 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>

如果用户通过悬停效果看到他实际导航的位置会很好：

a:hover{color:blue}

谢谢！实验：http: //jsfiddle.net/ZBn7r/1/

4

2 回答 2

3

用焦点替换悬停。

然后，您可以使用 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();

        }
    }
);

更新小提琴：http: //jsfiddle.net/ZBn7r/2/

于 2013-08-14T15:42:52.450 回答
1

在jsfiddle 链接中测试的完整工作代码片段

HTML

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

CSS

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

JS

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');
        }
    }
});
于 2013-08-14T15:46:29.333 回答