使用箭頭鍵選擇並突出顯示元素

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');