有关按键控制网页超链接问题

<script type="text/javascript">
//段程序可以完成和TAB键相同的功能,不过你要对网页代码做一一
var i=0;maxid=9;//这里的maxid为你超链ID的最大值,即共有几个链要实现这个功能,其ID必须命名为link+一个数字
function linkfocus(id){
var linkid=document.getElementById("link"+i).focus();//使ID为link+i的超链获取焦点
}
document.onkeydown=function() {
if((event.keyCode==39 || event.keyCode==40))//如果是按键为→或↓,则焦点右移
{
i=i+1;
if(i>maxid){i=1;linkfocus(1);}
else{linkfocus(i);}
}
else if(event.keyCode==37 || event.keyCode==38)//如果是按键为←或↑,则焦点左移
{
i=i-1;
if(i<1){i=maxid;linkfocus(maxid);}
else{linkfocus(i);}
}
}
</script>
<style type="text/css">
<!--
.bian {
border: 1px solid #FF0000;
}
-->
</style>

<body onload="link1.focus()">
<table width="450" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="140" height="50" align="center" valign="middle"><a href="#" hideFocus onFocus="this.className='bian'" onBlur="this.className=''" id="link1"><img src="http://www.hao123.com/logox3.gif" border="0"></a></td>
<td width="140" height="50" align="center" valign="middle"><a href="#" hideFocus onFocus="this.className='bian'" onBlur="this.className=''" id="link2"><img src="http://www.hao123.com/logox3.gif" border="0"></a></td>
<td width="140" height="50" align="center" valign="middle"><a href="#" hideFocus onFocus="this.className='bian'" onBlur="this.className=''" id="link3"><img src="http://www.hao123.com/logox3.gif" border="0"></a></td>
</tr>
<tr>
<td width="140" height="50" align="center" valign="middle"><a href="#" hideFocus onFocus="this.className='bian'" onBlur="this.className=''" id="link4"><img src="http://www.hao123.com/logox3.gif" border="0"></a></td>
<td width="140" height="50" align="center" valign="middle"><a href="#" hideFocus onFocus="this.className='bian'" onBlur="this.className=''" id="link5"><img src="http://www.hao123.com/logox3.gif" border="0"></a></td>
<td width="140" height="50" align="center" valign="middle"><a href="#" hideFocus onFocus="this.className='bian'" onBlur="this.className=''" id="link6"><img src="http://www.hao123.com/logox3.gif" border="0"></a></td>
</tr>
<tr>
<td width="140" height="50" align="center" valign="middle"><a href="#" hideFocus onFocus="this.className='bian'" onBlur="this.className=''" id="link7"><img src="http://www.hao123.com/logox3.gif" border="0"></a></td>
<td width="140" height="50" align="center" valign="middle"><a href="#" hideFocus onFocus="this.className='bian'" onBlur="this.className=''" id="link8"><img src="http://www.hao123.com/logox3.gif" border="0"></a></td>
<td width="140" height="50" align="center" valign="middle"><a href="#" hideFocus onFocus="this.className='bian'" onBlur="this.className=''" id="link9"><img src="http://www.hao123.com/logox3.gif" border="0"></a></td>
</tr>
</table>
</body>
把上面代码复制,按两下的时候才会执行操作,不知道是什么原因

<script type="text/javascript">
//段程序可以完成和TAB键相同的功能,不过你要对网页代码做一一
var i=0;maxid=9;//这里的maxid为你超链ID的最大值,即共有几个链要实现这个功能,其ID必须命名为link+一个数字
function linkfocus(id){
var linkid=document.getElementById("link"+i).focus();//使ID为link+i的超链获取焦点
}
document.onkeydown=function() {
if((event.keyCode==39 || event.keyCode==40))//如果是按键为→或↓,则焦点右移
{
i=i+1;
if(i>maxid){i=1;linkfocus(1);}
else{linkfocus(i);}
}
else if(event.keyCode==37 || event.keyCode==38)//如果是按键为←或↑,则焦点左移
{
i=i-1;
if(i<1){i=maxid;linkfocus(maxid);}
else{linkfocus(i);}
}
}
</script>
<style type="text/css">
<!--
.bian {
border: 1px solid #FF0000;
}
-->
</style>

<body onLoad="link1.focus()">
<table width="450" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="140" height="50" align="center" valign="middle"><a href="http://www.163.com" hideFocus onFocus="this.className='bian'" onBlur="this.className=''" id="link1"><img src="http://www.hao123.com/logox3.gif" border="0"></a></td>
<td width="140" height="50" align="center" valign="middle"><a href="http://www.163.com" hideFocus onFocus="this.className='bian'" onBlur="this.className=''" id="link2"><img src="http://www.hao123.com/logox3.gif" border="0"></a></td>
<td width="140" height="50" align="center" valign="middle"><a href="http://www.163.com" hidefocus onFocus="this.className='bian'" onBlur="this.className=''" id="link3"><img src="http://www.hao123.com/logox3.gif" border="0"></a></td>
</tr>
<tr>
<td width="140" height="50" align="center" valign="middle"><a href="http://www.163.com" hideFocus onFocus="this.className='bian'" onBlur="this.className=''" id="link4"><img src="http://www.hao123.com/logox3.gif" border="0"></a></td>
<td width="140" height="50" align="center" valign="middle"><a href="http://www.163.com" hideFocus onFocus="this.className='bian'" onBlur="this.className=''" id="link5"><img src="http://www.hao123.com/logox3.gif" border="0"></a></td>
<td width="140" height="50" align="center" valign="middle"><a href="http://www.163.com" hidefocus onFocus="this.className='bian'" onBlur="this.className=''" id="link6"><img src="http://www.hao123.com/logox3.gif" border="0"></a></td>
</tr>
<tr>
<td width="140" height="50" align="center" valign="middle"><a href="http://www.163.com" hideFocus onFocus="this.className='bian'" onBlur="this.className=''" id="link7"><img src="http://www.hao123.com/logox3.gif" border="0"></a></td>
<td width="140" height="50" align="center" valign="middle"><a href="http://www.163.com" hideFocus onFocus="this.className='bian'" onBlur="this.className=''" id="link8"><img src="http://www.hao123.com/logox3.gif" border="0"></a></td>
<td width="140" height="50" align="center" valign="middle"><a href="http://www.163.com" hideFocus onFocus="this.className='bian'" onBlur="this.className=''" id="link9"><img src="http://www.hao123.com/logox3.gif" border="0"></a></td>
</tr>
</table>
温馨提示:答案为网友推荐,仅供参考
第1个回答  推荐于2016-11-28
因为i的初值是0,第一次按下键,也就是执行完第一次i=i+1时,i=1,焦点还是在第一个链接上,第二次i才等于2,把i的初值改成1就行本回答被提问者采纳
相似回答