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

Question

我有一個內聯阻止框列表。 第一個框被設置為活動狀態並突出顯示。 通過使用箭頭鍵，我希望將其旁邊的框設置為活動狀態。 哪個JS事件最合適？

js小提琴

的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

請檢查這個小提琴

上下不能准確，因為這取決於工作表的樣式

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

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