由于项目需要，做了一个js：当在一级菜单上按左右键时二级菜单将随着变化。此js用于机顶盒上的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns=" [url]http://www.w3.org/1999/xhtml[/url]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>portal2</title>
</head>
<script type="text/javascript">
var main_id = 1;
var total = 6;
<html xmlns=" [url]http://www.w3.org/1999/xhtml[/url]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>portal2</title>
</head>
<script type="text/javascript">
var main_id = 1;
var total = 6;
document.onkeydown=grabEvent;
function grabEvent(e){
var keycode;
if(!window.event)
keycode=e.which;
else
keycode=event.keyCode;
switch (keycode) {
case 65361:
onLeft();//向左
break;
case 65363:
onRight();//向右
break;
case 37:
onLeft();//向左
break;
case 39:
onRight();//向右
break;
}
}
var keycode;
if(!window.event)
keycode=e.which;
else
keycode=event.keyCode;
switch (keycode) {
case 65361:
onLeft();//向左
break;
case 65363:
onRight();//向右
break;
case 37:
onLeft();//向左
break;
case 39:
onRight();//向右
break;
}
}
function onLeft(){
main_id = parseInt(document.getElementById('now_id').value)-1;
if (main_id==0){
}
else{
show_upinfo(main_id);
}
}
main_id = parseInt(document.getElementById('now_id').value)-1;
if (main_id==0){
}
else{
show_upinfo(main_id);
}
}
function onRight(){
main_id = parseInt(document.getElementById('now_id').value)+1;
if (main_id==total){
}
else{
show_downinfo(main_id);
}
}
main_id = parseInt(document.getElementById('now_id').value)+1;
if (main_id==total){
}
else{
show_downinfo(main_id);
}
}
function show_upinfo(main_id){
document.getElementById('now_id').value=main_id;
var pass_id = main_id+1;
document.getElementById('div'+pass_id).style.visibility = 'hidden';
document.getElementById('div'+main_id).style.visibility = 'visible';
}
document.getElementById('now_id').value=main_id;
var pass_id = main_id+1;
document.getElementById('div'+pass_id).style.visibility = 'hidden';
document.getElementById('div'+main_id).style.visibility = 'visible';
}
function show_downinfo(main_id){
document.getElementById('now_id').value=main_id;
var pass_id = main_id-1;
document.getElementById('div'+pass_id).style.visibility = 'hidden';
document.getElementById('div'+main_id).style.visibility = 'visible';
}
document.getElementById('now_id').value=main_id;
var pass_id = main_id-1;
document.getElementById('div'+pass_id).style.visibility = 'hidden';
document.getElementById('div'+main_id).style.visibility = 'visible';
}
</script>
<body>
<input type="hidden" id="now_id" value="1" />
<table width="495" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="#" ><img src="images/b1.gif" name="Image4" width="99" height="85" border="0" id="Image4" /></a></td>
<td ><a href="#"><img src="images/b2.gif" name="Image5" width="99" height="85" border="0" id="Image5" /></a></td>
<td><a href="#" ><img src="images/b3.gif" name="Image6" width="99" height="85" border="0" id="Image6" /></a></td>
<td><a href="#" ><img src="images/b4.gif" name="Image7" width="99" height="85" border="0" id="Image7" /></a></td>
<td ><a href="#" ><img src="images/b5.gif" name="Image8" width="99" height="85" border="0" id="Image8" /></a></td>
</tr>
<tr>
<td><div id="div1" style="visibility:visible">
<ul>
<a href="#">包月点播</a>
<a href="#">按次点播</a>
<a href="#">免费点播</a>
</ul>
</div></td>
<td><div id="div2" style="visibility:hidden">
<ul>
<a href="#">公告列表</a>
</ul>
</div></td>
<td><div id="div3" style="visibility:hidden">
<ul>
<a href="#">最新最热</a>
</ul>
</div></td>
<td><div id="div4" style="visibility:hidden">
<ul>
<a href="#">我的收藏</a>
</ul>
</div></td>
<td><div id="div5" style="visibility:hidden">
<ul>
<a href="#">万 年 历</a>
</ul>
</div></td>
</tr>
</table>
</body>
</html>
<body>
<input type="hidden" id="now_id" value="1" />
<table width="495" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="#" ><img src="images/b1.gif" name="Image4" width="99" height="85" border="0" id="Image4" /></a></td>
<td ><a href="#"><img src="images/b2.gif" name="Image5" width="99" height="85" border="0" id="Image5" /></a></td>
<td><a href="#" ><img src="images/b3.gif" name="Image6" width="99" height="85" border="0" id="Image6" /></a></td>
<td><a href="#" ><img src="images/b4.gif" name="Image7" width="99" height="85" border="0" id="Image7" /></a></td>
<td ><a href="#" ><img src="images/b5.gif" name="Image8" width="99" height="85" border="0" id="Image8" /></a></td>
</tr>
<tr>
<td><div id="div1" style="visibility:visible">
<ul>
<a href="#">包月点播</a>
<a href="#">按次点播</a>
<a href="#">免费点播</a>
</ul>
</div></td>
<td><div id="div2" style="visibility:hidden">
<ul>
<a href="#">公告列表</a>
</ul>
</div></td>
<td><div id="div3" style="visibility:hidden">
<ul>
<a href="#">最新最热</a>
</ul>
</div></td>
<td><div id="div4" style="visibility:hidden">
<ul>
<a href="#">我的收藏</a>
</ul>
</div></td>
<td><div id="div5" style="visibility:hidden">
<ul>
<a href="#">万 年 历</a>
</ul>
</div></td>
</tr>
</table>
</body>
</html>
本文转自 yzzh9 51CTO博客，原文链接：http://blog.51cto.com/java999/125959，如需转载请自行联系原作者
