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

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--; 
    if (index==-1){index=$("#orderedList li").length-1;} 
    $('li').removeClass('active'); 
    $($('li')[index]).addClass('active');