如何在<li>树中查找下一个和上一个元素并使其可聚焦：

Question

我的代码看起来像这样

<ul role="tablist>
<li role="presentation" tabindex="0">
<a role="tab" href='#' data-toggle="tab">One</a>
</li>
<li role="presentation" tabindex="0">
<a role="tab" data-toggle="tab" href='#'>Two</a>
</li>
<li role="presentation" tabindex="0">
<a role="tab" data-toggle="tab" href='#'>Three</a>
</li>
<li role="presentation" tabindex="0">
<a role="tab" data-toggle="tab" href='#'>Four</a>
</li>
</ul>

我想找到元素并在按下箭头键时使其可聚焦。

提前致谢：）

Answer 1

我不知道您花了多少钱来寻找问题的答案。但是Stackoverflow上的人很少。

看看这个问题 Shift focus with arrow keys in Javascript

Answer 2

这样的事情会对你有用：

// wait to load DOM
$('document').ready(function() {

    // active li holder
    var active = 0;

    // add keypress listener
    $('body').on('keypress', function() {

        // get the keycode
        var code = e.keyCode || e.which;

        // check for arrow keys
        if(code == 37) { //left
            active++;
        } else if(code == 39) { // right
            active--;
        }

        // this is the active li element you can process it as per your need
        $('ul li').eq(active);

    });

});