Question

我知道有很多关于使用键盘事件导航的问题。但是，由于我想要了解所有内容而不仅仅是复制粘贴内容，我无法找到有关该主题的任何好的解释或教程。

这是我到目前为止所做的，它适用于左右箭头。但是，如果有人能够指出我正确的方向如何使它适用于上下箭头，我会非常高兴！也许它不是最美妙的解决方法，但是一开始我只想了解基本的！

<a class="link" href="#">Link 1</a>
<a class="link" href="#">Link 2</a>
<a class="link" href="#">Link 3</a>
<a class="link" href="#">Link 4</a>
<a class="link" href="#">Link 5</a>
<br />
<a class="link" href="#">Link 1</a>
<a class="link" href="#">Link 2</a>
<a class="link" href="#">Link 3</a>
<a class="link" href="#">Link 4</a>
<a class="link" href="#">Link 5</a>



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

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

    }

Answer 1

我知道你想从一行跳到另一行。

尝试在jQuery info here中使用:nth-child()选择器，这样您就可以选择所需的任何元素（在本例中为上面的那个）。

Answer 2

我写了一个例子，将链接分成两个div：

<div id="menu1">
    <a class="link" href="#">Link 1</a>
    <a class="link" href="#">Link 2</a>
    <a class="link" href="#">Link 3</a>
    <a class="link" href="#">Link 4</a>
    <a class="link" href="#">Link 5</a>
</div>
<div id="menu2">
    <a class="link" href="#">Link 1</a>
    <a class="link" href="#">Link 2</a>
    <a class="link" href="#">Link 3</a>
    <a class="link" href="#">Link 4</a>
    <a class="link" href="#">Link 5</a>
</div>

附上活动：

$("a.link").on('keyup', function(e) {
    var current = $('a:focus');
    if (e.which == 39) {
        current.next().focus();
    }
    else if (e.which == 37) {      
        current.prev().focus();
    }
    // move to first link on previous div
    else if (e.which == 38) {
        current.parent().prev().find('a:first').focus();
    }
    // move to first link on next div
    else if (e.which == 40) {
        current.parent().next().find('a:first').focus();
    }
});

$("a.link:first").focus();

http://jsfiddle.net/rogeriolino/g6s22676/

修改

保持相同的指数

// move to first link on previous div else if (e.which == 38) { var index = current.index() + 1; current.parent().prev().find('a:nth-child(' + index + ')').focus(); } // move to first link on next div else if (e.which == 40) { var index = current.index() + 1; current.parent().next().find('a:nth-child(' + index + ')').focus(); }

http://jsfiddle.net/rogeriolino/g6s22676/4/

Answer 3

在使用键绑定时，我喜欢使用此模块，这使得它变得更简单，代码更易读/可维护。

https://github.com/madrobby/keymaster

使用jQuery进行密钥导航

3 个答案: