Chinaunix首页 | 论坛 | 博客

IT民工窝棚qbq.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

qbq

  • 博客访问： 30480093
  • 博文数量： 708
  • 博客积分： 12163
  • 博客等级： 上将
  • 技术积分： 8240
  • 用 户 组： 普通用户
  • 注册时间： 2007-12-04 20:59
文章分类

全部博文（708）

推荐博文
相关博文
JS实现键盘控制的菜单

分类： Java

2008-11-26 15:00:57

 

有人在百度知道出2000分求此程式。只好连夜赶制.哈哈

代码没有注释,如有问题，。可在下面提出.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#top_links{ width:100%; background:#CCCCCC; padding:5px;}
a{ display:inline; padding:5px; background:#FF9900; font-size:14px; font-weight:bold; color:#333333; border:1px solid #CCCCCC; text-decoration:none;}
#left_links_item a{ display:block; width:100px; background:#0099CC;}
#left_links_item div{ margin:10px; display:none;}
</style>
<script type="text/javascript">
    var tabControl=function(topTabId,leftTabId,itemSplitId){
      this.topTabId=topTabId;
     this.leftTabId=leftTabId;
     this.topTab=document.getElementById(topTabId);
     this.itemSplitId=itemSplitId;
     this.topLinksArr=null;
     this.LeftLinksArr=null;
      this.tiindex=-1;
      this.liindex=-1;
    }
  
    tabControl.prototype={
     bindEventForTopLinks:function(){
      var toplinks=this.topTab.getElementsByTagName('a');
      this.topLinksArr=new Array();
      var tc=this;
      for(var i=0;i<toplinks.length;i++){
             toplinks[i].onfocus=function(){
          tc.bindEventForLeftLinks(tc.itemSplitId+this.id);
          tc.showLeftLink(tc.itemSplitId+this.id);
          this.style.cssText='background:#fff';
          this.focus();
          }
          toplinks[i].onblur=function(){
         this.style.cssText='background:#FF9900';
         }
        tc.topLinksArr.push(toplinks[i]);
      }
     },
     bindEventForLeftLinks:function(itemId){
       this.LeftLinksArr=new Array();
      var tc=this,
      _item=document.getElementById(itemId),
      itemsLinks=_item.getElementsByTagName('a');
      for(var i=0;i<itemsLinks.length;i++){
     
            itemsLinks[i].onfocus=function(){
     
        
          this.style.cssText='background:#fff';
          };
          itemsLinks[i].onblur=function(){
     
           this.style.cssText='background:#0099CC';
         };
          tc.LeftLinksArr.push(itemsLinks[i]);
      }
   
     },
     showLeftLink:function(linksid){
        var items=document.getElementById(this.leftTabId).childNodes;
      var cuLinks=document.getElementById(linksid);
      for(var i=0;i<items.length;i++){
       if(items[i].nodeName=='DIV'){
        items[i].style.cssText="display:none";
       }
      }
      cuLinks.style.cssText="display:block";
      this.bindKeyEvent(-1);
     },
     bindKeyEvent:function(liindex){
       var _this=this,lindex=liindex||this.liindex;
      document.onkeydown=function(event){
       var e=event||window.event;
       switch(e.keyCode){
         case 39:
           return _this.topLinksArr[this.tiindex=this.tiindex<_this.topLinksArr.length-1?this.tiindex+=1:0].focus();
         case 37:
           return _this.topLinksArr[this.tiindex=this.tiindex>0?this.tiindex-=1:_this.topLinksArr.length-1].focus();
         case 40:
           return _this.LeftLinksArr[lindex=lindex<_this.LeftLinksArr.length-1?lindex+=1:0].focus();
         case 38:
           return _this.LeftLinksArr[lindex=lindex>0?lindex-=1:_this.LeftLinksArr.length-1].focus();
       }
      }
    
     }
    }
  

//页面加载时调用即可.


    window.onload=function(){
    var tc=new tabControl('top_links','left_links_item','itemfor_');
    try{
     tc.bindEventForTopLinks();
     tc.bindKeyEvent();
     }catch(e){try{tc.topLinksArr[0].focus()}catch(e){}}
    }
</script>

</head>

<body>
<div id="top">
<div id="top_links">
     <a href="#" id="top_link_1">快乐故事吧</a>
      <a href="#" id="top_link_2">启蒙知识学堂</a>
      <a href="#" id="top_link_3">儿童音乐屋</a>
      <a href="#" id="top_link_4">游戏总动员</a>
      <a href="#" id="top_link_5">葡萄树下的欢歌</a>
</div>

</div>
<div id="left">
<div id="left_links_item">
         <div id="itemfor_top_link_1" >
           <a href="">itemfor_top_link_1</a>
            <a href="">itemfor_top_link_1</a>
            <a href="">itemfor_top_link_1</a>
            <a href="">itemfor_top_link_1</a>
            <a href="">itemfor_top_link_1</a>
            <a href="">itemfor_top_link_1</a>
         </div>
          <div id="itemfor_top_link_2" >
          <a href="">itemfor_top_link_2</a>
          <a href="">itemfor_top_link_2</a>
          <a href="">itemfor_top_link_2</a>
          <a href="">itemfor_top_link_2</a>
          <a href="">itemfor_top_link_2</a>
          <a href="">itemfor_top_link_2</a>
         </div>
          <div id="itemfor_top_link_3" >
          <a href="">itemfor_top_link_3</a>
          <a href="">itemfor_top_link_3</a>
          <a href="">itemfor_top_link_3</a>
          <a href="">itemfor_top_link_3</a>
          <a href="">itemfor_top_link_3</a>
          <a href="">itemfor_top_link_3</a>
         </div>
          <div id="itemfor_top_link_4">
          <a href="">itemfor_top_link_4</a>
          <a href="">itemfor_top_link_4</a>
          <a href="">itemfor_top_link_4</a>
          <a href="">itemfor_top_link_4</a>
          <a href="">itemfor_top_link_4</a>
          <a href="">itemfor_top_link_4</a>
          <a href="">itemfor_top_link_4</a>
         </div>
          <div id="itemfor_top_link_5" >
          <a href="">itemfor_top_link_5</a>
          <a href="">itemfor_top_link_5</a>
          <a href="">itemfor_top_link_5</a>
          <a href="">itemfor_top_link_5</a>
          <a href="">itemfor_top_link_5</a>
          <a href="">itemfor_top_link_5</a>
          <a href="">itemfor_top_link_5</a>
          <a href="">itemfor_top_link_5</a>
         </div>
    </div>
</div>
</body>
</html>

阅读(1680) | 评论(0) | 转发(0) |
0

上一篇：Seasar,JAVA开源项目简介

下一篇：使用JSON

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6