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

Question

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

我已经在Stackoverflow上阅读了十几个帖子，这些帖子似乎是在解决这个问题而没有真正回答...所以请不要将此重复作为一个重复的问题

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

Answer 1

这是我为您制作的JS小提琴： 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);
        }
    });
});​