javascript - 通过导航键选择适当的 div 元素

Question

我的页面上显示了一个图像列表，其中有多个 div 相互叠加。

div 根据点击的按钮显示。

我想使用导航键选择图像。

谁能给我指路。

到目前为止的代码 - Fiddle Demo

此处带有“selected”属性的图像显示为蓝色。单击箭头键时，我希望突出显示相应的图像。

<div>
    <div id="page1" class="button">SHOW PAGE1</div>
    <div id="page2" class="button">SHOW PAGE2</div>
</div>
<div id="a1" class="container"> Page 1
    <img class="item" />
    <img class="item" />
    <img class="item" />
    <img class="item" />
    <img class="item" />
</div>
<div id="a2" class="container" hidden> Page 2
    <img class="item" />
    <img class="item" />
    <img class="item" />
    <img class="item" />
    <img class="item" />
    <img class="item" />
    <img class="item" />
</div>

Answer 1

您可以为此使用trigger() 函数

$(document).keydown(function(e) {
    switch(e.which) {

        case 37: // left
            $('#page1').trigger('click');
        break;

        case 38: // up
            $('#page2').trigger('click');
        break;

        case 39: // right
            $('#page2').trigger('click');
        break;

        case 40: // down
            $('#page1').trigger('click');
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
});

demo