使用箭头键选择并突出显示元素

Question

我有一个内联块框列表。第一个框设置为活动并突出显示。通过使用箭头键我想将它旁边的框设置为活动状态。哪个JS活动最好？

js fiddle

HTML

<ol>
<li class="active"></li>
<li></li>
<li></li>
</ol>

JS

$(document).keydown(function(e) {
switch(e.which) {
    case 37: // left
     $('li').addClass('active');
    break;

    case 38: // up
     $('li').addClass('active');
    break;

    case 39: // right
     $('li').addClass('active');
    break;

    case 40: // down
     $('li').addClass('active');
    break;

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

CSS

li {
display: inline-block;
padding: 50px;
border: solid;
counter-increment: step-counter;
margin: 20px;
 }

Answer 1

请查看此fiddle

  

上下不准确，因为这取决于工作表的样式

您可以使用index指定元素的索引

        index--;
    if (index==-1){index=$("#orderedList li").length-1;}
    $('li').removeClass('active');
     $($('li')[index]).addClass('active');