如何使用键盘箭头键在 HTML 元素之间导航

Question

我希望我的网页允许使用键盘上的左右箭头键在文本块之间导航。我认为这需要 Jquery。

我已经在 Stackoverflow 上阅读了十多篇帖子，这些帖子看似解决了这个问题，但没有真正回答……所以请不要将其作为重复问题关闭

更新：我只想使用箭头键在文章（如博客文章）之间滚动。我想要的只是将页面滚动到下一个分隔符。

Answer 1

这是我为你制作的 JS Fiddle：http://jsfiddle.net/3NAwz/

此代码显示包含文本的 div 标记，在包装器内浮动到左侧。然后将其包含在另一个小于整个文本（其中一个部分）的包装器中。

然后使用 jQuery 使用箭头键滚动内容。 .not(":animated") 部分会阻止它在动画中运行。在一些 5 岁的孩子决定非常不耐烦之后，使用它只会让它变得更好，而无需排长队。

HTML

<div class="wrapper">
    <div class="inner">
        <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquam erat vitae nibh convallis quis luctus turpis dignissim. Suspendisse imperdiet interdum consequat. Curabitur erat nisl, gravida et aliquet vitae, faucibus vitae lacus.</div>
        <div class="text">Donec dignissim lorem eu augue tincidunt facilisis. Etiam leo purus, tristique eu tempus gravida, auctor sit amet velit. Quisque mattis, libero ut pharetra luctus, tellus justo viverra elit, sodales scelerisque ipsum magna vel felis.</div>
        <div class="text">Pellentesque ligula mauris, volutpat id molestie posuere, fermentum eu lacus. Donec quis metus nisi, et accumsan massa. Morbi eget augue eget lorem semper cursus sit amet non tortor. Aliquam tempor rhoncus odio sit amet fermentum.</div>
    </div>
</div>​

CSS

.wrapper {
    width:340px;
    overflow:hidden;
    border:1px #000 solid;
}
.inner {
    width:1020px;
}
.text {
    float:left;
    width:300px;
    padding:20px;
    font-size:14px;
    font-weight:bold;
    font-family:Arial;
}

​jQuery

$(document).ready(function() {
    $(document).keyup(function(event) {
        var key = event.which;
        if(key == 37) { // Left arrow key
            $(".wrapper").not(":animated").animate({ scrollLeft: "-=340px" }, 500);
        }
        if(key == 39) { //Right arrow key
            $(".wrapper").not(":animated").animate({ scrollLeft: "+=340px" }, 500);
        }
    });
});​