<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF8"/>
<title>Menu</title>
<script language="javascript">
var menu_select = 1;
var menu_max = 10;
var $=function(id){
return document.getElementById(id);
}
function doKeydown(e){
var e = e||event;
var currKey=e.keyCode||e.which||e.charCode;
//alert(currKey);
if(currKey == 38 || currKey == 75){
if(menu_select>1){
menu_select = menu_select - 1;
}
}else if(currKey == 40 || currKey == 74){
if(menu_select<10){
menu_select = menu_select + 1;
}
}
for(var i = 1;i<=menu_max;++i){
if(i == menu_select){
$("m"+i).style.backgroundColor="#eeeeee";
}else{
$("m"+i).style.backgroundColor="#aaaaaa";
}
}
}
document.onkeydown = doKeydown;
</script>
</head>
<body>
<div id="m1" style=" width:100px; height:20px; border:solid 1px black;">m1;</div>
<div id="m2" style=" width:100px; height:20px; border:solid 1px black;">m2;</div>
<div id="m3" style=" width:100px; height:20px; border:solid 1px black;">m3;</div>
<div id="m4" style=" width:100px; height:20px; border:solid 1px black;">m4;</div>
<div id="m5" style=" width:100px; height:20px; border:solid 1px black;">m5;</div>
<div id="m6" style=" width:100px; height:20px; border:solid 1px black;">m6;</div>
<div id="m7" style=" width:100px; height:20px; border:solid 1px black;">m7;</div>
<div id="m8" style=" width:100px; height:20px; border:solid 1px black;">m8;</div>
<div id="m9" style=" width:100px; height:20px; border:solid 1px black;">m9;</div>
<div id="m10" style=" width:100px; height:20px; border:solid 1px black;">m10;</div>
</body>
</html>
以下来自 @Liu-Ameng 同学的代码：
目测基本的上下移动是可以执行的。增加一些场景：