tab键控制在a标签中的切换

当tab键按下时,控制获取焦点的对象。
+展开
-HTML
<style>
.focus{background-color:red;color:white}
.unfocus{background-color:white;}
</style> 
<ul id="ul1" style="width:100px">
<li class="focus"><a href='#'>Google</a></li>
<li class="unfocus"><a href='#'>Baidu</a></li>
<li class="unfocus"><a href='#'>163</a></li>
</ul>
<a href='#'>test1</a><br>
<a href='#'>test0</a><br>
<a href='#'>test2</a><br>
<a href='#'>test3</a>
<script>
var index=0;//当前获得焦点的li下标
var ie=navigator.appName!="Netscape";//是否为ie
document.onkeydown=function(e)
{  
  e=e||event;
  if(e.keyCode==9)//TAB键
  {
    //阻止事件
    if(ie)//ie
      e.returnValue=false;
    else //ff
      e.preventDefault();  
    var ul1=document.getElementById("ul1");
    var lis=ul1.getElementsByTagName("li");
    index++;
    if(index>lis.length-1)index=0;
    for(var i=0;i<lis.length;i++)
    {
      lis[i].className="unfocus";
    }
    lis[index].className="focus";
  }
}
</script> 

加支付宝好友偷能量挖...


原创文章,转载请注明出处:tab键控制在a标签中的切换

评论(0)Web开发网
阅读(157)喜欢(0)JavaScript/Ajax开发技巧