js导航加点事件或超链接

我想在下面的JS导航中下拉出来的菜单加个点击事件,或是一个超链接,一点可以链接到别的页面,哪位高手帮帮忙.<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>几款实用的下拉菜单，alixix整理收集。</title>
<style type="text/css">
#ss,#sss{
width:430px;
height:28px;
background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_1254192730G9x9.gif);
font-size:13px;
color:#FFFFFF;
}
.c{
width:140px;
height:auto;
border:1px solid #9C9A9C;
position:absolute;
background-color:#FFFFFF;
background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_12541923146wVz.gif);
background-repeat:repeat-y;
padding:2px;
z-index:10;
}
.hr{
display:block;
overflow:hidden;
height:1px;
width:110px;
background-color:#666666;
margin:2px;
margin-left:26px;
}
#ss div,#sss div{
 color:#FFFFFF;
 height:28px;
 width:80px;
 float:left;
 line-height:28px;
 vertical-align:middle;
 text-align:center;
}
#ss div.title,#sss div.title{
 color:#1f3a87;
}
#ss div img,#sss div img{
vertical-align:text-bottom;
border:0px;
margin-right:5px;
padding-top:6px;
}
.l{
display:block;
height:26px;
width:99%;
color:#1f3a87;
font-size:12px;
line-height:26px;
vertical-align:middle;
margin:0 auto;
}
.disabled{
color:#999999;
}
.list{
*background-color:#FFFFFF;
border:1px solid transparent;
*border-color:white;
filter:chroma(color=white);
}
.bg{
*background-color:#FFFFFF;
border:1px solid transparent;
*border-color:white;
filter:chroma(color=white);
background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_12541923132yyW.gif);
background-repeat:no-repeat;
background-position: 110px 4px;
}
.bg img,.list img,.disabled img{
vertical-align:text-bottom;
border:0px;
margin-right:10px;
padding-top:4px;
}
.listover{
border:1px solid #ADCFF7;
background-color:#EFF3FF;
}
.bgover{
border:1px solid #ADCFF7;
background-color:#EFF3FF;
background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_12541923132yyW.gif);
background-repeat:no-repeat;
background-position: 110px 4px;
}
.bgover img, .listover img{
vertical-align:text-bottom;
border:0px;
margin-right:10px;
padding-top:4px;
}
</style>
</head>
<body style=" padding:30px; margin:0px;">
<div id='ss'>
        <div><img src='http://beta.hi.csdn.net/attachment/200909/29/79043_1254192282xH46.gif'>人族</div>
        <div><img src='http://beta.hi.csdn.net/attachment/200909/29/79043_1254192282ddCJ.gif'>兽族</div>
        <div><img src='http://beta.hi.csdn.net/attachment/200909/29/79043_1254192282DoV1.gif'>不死族</div>
        <div><img src='http://beta.hi.csdn.net/attachment/200909/29/79043_1254192282xH46.gif'>精灵族</div>
</div>
<br><br><br><br>
<div style="float:right">自动判断方向:
    <div id='sss'>
        <div><img src='http://beta.hi.csdn.net/attachment/200909/29/79043_1254192282xH46.gif'>人族</div>
        <div><img src='http://beta.hi.csdn.net/attachment/200909/29/79043_1254192282ddCJ.gif'>兽族</div>
        <div><img src='http://beta.hi.csdn.net/attachment/200909/29/79043_1254192282DoV1.gif'>不死族</div>
        <div><img src='http://beta.hi.csdn.net/attachment/200909/29/79043_1254192282xH46.gif'>精灵族</div>
    </div>
</div>
<br><br><br>
<style type="text/css">
#tt{
height:auto;
width:144px;
border:1px solid #9C9A9C;
}
#tt div{
height:25px;
width:135px;
margin:2px;
font-size:12px;
line-height:25px;
vertical-align:middle;
padding-left:5px;
background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_12541923132KUt.png);
}
#tt div.title{
 background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_12541923138NPD.png);
 color:#FFFFFF;
}
.tc{
width:144px;
height:auto;
border:1px solid #9C9A9C;
position:absolute;
background-color:#FFFFFF;
z-index:10;
}
.tl{
display:block;
height:25px;
width:135px;
font-size:12px;
line-height:25px;
vertical-align:middle;
margin:0 auto;
margin-top:2px;
margin-bottom:2px;
padding-left:5px;
}
.tlist{
 color:#000000;
 background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_1254192313Jzrd.png);
}
.tlistover{
 background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_1254192314VvN6.png);
 color:#FFFFFF;
}
.tbg{
 color:#000000;
 background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_12541923132KUt.png);
}
.tbgover{
 background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_12541923138NPD.png);
 color:#FFFFFF;
}
</style>
<div id='tt'>
 <div>人族</div>
 <div>兽族</div>
 <div>不死族</div>
 <div>精灵族</div>    
</div>
<br><br><br><br><br><br><br>
右键菜单:::
<br>
<style type="text/css">
#yy{
height:300px;
width:750px;
border:1px solid #FF0000;
}
#right{
width:144px;
height:auto;
border: 1px solid #999999;
display:none;
position:absolute;
background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_12541923146wVz.gif);
 background-color:#FFFFFF;
 background-repeat:repeat-y;
}
#right div{
 font-size:12px;
 height:28px;
 width:135px;
 line-height:28px;
 vertical-align:middle;
 padding-left:5px;
 color:#1f3a87;
 *background-color:#FFFFFF;
 border:1px solid transparent;
 *border-color:white;
 filter:chroma(color=white); 
 margin:0 auto;
 margin-top:2px;
 margin-bottom:2px; 
}
#right div img{
 vertical-align:text-bottom;
 border:0px;
 margin-right:5px;
 padding-top:6px;
}
#right div.title{
 border:1px solid #ADCFF7;
 background-color:#EFF3FF;
}
</style>
<div id='yy'>
</div>
 <div id='right'>
  <div><img src="http://beta.hi.csdn.net/attachment/200909/29/79043_1254192282ddCJ.gif">人族</div>
  <div><img src="http://beta.hi.csdn.net/attachment/200909/29/79043_1254192282DoV1.gif">兽族</div>
  <div><img src="http://beta.hi.csdn.net/attachment/200909/29/79043_1254192282xH46.gif">不死族</div>
  <div><img src="http://beta.hi.csdn.net/attachment/200909/29/79043_1254192282ddCJ.gif">精灵族</div>  
 </div>

解决方案 »

  1.   

    <script language="javascript">
    document.all&&document.execCommand("BackgroundImageCache", false, true); 
     var Sys = {
      IE : navigator.userAgent.toLowerCase().match(/msie ([\d.]+)/),
      Firefox : navigator.userAgent.toLowerCase().match(/firefox\/([\d.]+)/),
      Chrome : navigator.userAgent.toLowerCase().match(/chrome\/([\d.]+)/),
      IE6 : navigator.userAgent.toLowerCase().match(/msie ([\d.]+)/) && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6)
     } 
     function $(Id){return document.getElementById(Id)};
     function $$(p,e){return p.getElementsByTagName(e)};
     function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)};
     function removeListener(element,e,fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)};
     function create(elm,parent,fn){var element = document.createElement(elm);parent.appendChild(element);if(fn)fn(element);return element};
     function getTarget(e){return e.srcElement||e.target;};
     function getNext(e){ return e.relatedTarget||e.toElement;};
     function getobjpos(el,left){
            var val = 0;
            while (el !=null) {
                val += el["offset" + (left? "Left": "Top")];
                el = el.offsetParent;
            }
            return val;
     };
    function fixEvent(event) {
     if (event) return event;    //从cloudgamer中的代码中看到的  觉得停好  就拿来用了
     //event = ((this.ownerDocument || this.document || this).parentWindow || window).event;
     //var scrolldoc = isChrome || isSafari ? document.body : document.documentElement;
     event = window.event;
     event.pageX = event.clientX + document.documentElement.scrollLeft;
     event.pageY = event.clientY + document.documentElement.scrollTop;
     event.target = event.srcElement;  
     event.stopPropagation = fixEvent.stopPropagation;  
     event.preventDefault = fixEvent.preventDefault;
     if(event.type == "mouseout") {
      event.relatedTarget = event.toElement;
     }else if(event.type == "mouseover") {
      event.relatedTarget = event.fromElement;
     }                                                 
     return event;
    };
    fixEvent.preventDefault = function() {
     this.returnValue = false;
    };
    fixEvent.stopPropagation = function() {
     this.cancelBubble = true;
    };
     var CurrentStyle = function(element){return element.currentStyle || document.defaultView.getComputedStyle(element, null);};
    var Bind = function(object, fun,args) {
      return function() {
        return fun.apply(object,args||[]);
      }
    }
     var BindAsEventListener = function(object, fun,arg) {
      return function(event) {
       return fun.apply(object, [(event || window.event)].concat(arg||[]));
      }
     };
     var Extend = function()
     {
          var args = arguments;
          if(!args[1])args = [this,args[0]];                                       
          for(var property in args[1])args[0][property] = args[1][property];         
          return args[0];
     };
     
     var Class = function(properties){
       var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;};
       _class.prototype = properties;
       return _class;
     };
    var Menu = new Class({
     options:{ 
      h_style     : "title",
         c_style     : "c",             //列表容器样式
      l_style     : "l list",        //列表样式
      l_style1    : "l listover",    //鼠标放上去后的列表样式
      l_bg_style  : "l bg",          //有子菜单时候的背景
      l_bg_style1 : "l bgover",      //有子菜单时鼠标放上去的样式
      l_disabled  : "l disabled",   //设置不能选中时的样式
      l_hr        : "hr",           //分行符的样式
      direction : "X"
     },
     initialize : function(container,data,elm,options){
      this.container = container;  //设置容器
      this.data      = data;       //数据
      this.elm       = elm;       //设置list是什么元素 可以是div 也可以是a 也可以是其他
      this.stack     = [];        //元素堆栈 看哪些元素已经存在了
      this.obj       = null;      //记录哪一项被选种过
      this.lists     = [];        //为查找元素而记录元素 
      Extend(this.options,options||{});
      Extend(this,this.options);
       var elm = this.container.getElementsByTagName(this.elm);
       for(var i=0,l=elm.length;i<l;i++)
       {
        if(this.data[i].txt == i)
        {
         addListener(elm[i],'mouseover',BindAsEventListener(this,this.Title,[this.data[i],elm[i]]));
         addListener(elm[i],'mouseout',BindAsEventListener(this,this.Hide));
        }
       }
     },
     Title : function(e,d,obj){
      this.obj = obj;
      obj.className = this.h_style;
      if(!d.menu)return;
      var container = this.Makebody(d,obj);
      if(this.direction=="X")
      {
       container.style.left = getobjpos(obj,1) + "px";
       container.style.top  = obj.offsetHeight + getobjpos(obj,0) + "px";
      }
      else
      {
       container.style.left = getobjpos(obj,1)+obj.offsetWidth + "px"
       container.style.top  = getobjpos(obj,0) + "px";   
      }
      
     },
     Makemenu : function(e,d,obj){
      this.mouseover(obj);
      if(!d.menu)return;
      var container = this.Makebody(d,obj);
       container.style.left = this.pos(obj,container,"X")?(getobjpos(obj,1)+ obj.offsetWidth+ "px"):(getobjpos(obj,1) - container.offsetWidth + 2 + "px");
      container.style.top = this.pos(obj,container,"Y")?(getobjpos(obj,0) + "px"):(getobjpos(obj,0) - container.offsetHeight+2+20+"px");
     },
     Makebody : function(d,obj){
      if(!obj.getAttribute('container')){
       var _self = this;  
       var container = create('div',document.body,function(o){o.className = _self.c_style;});
       container.onmouseup = function(e){fixEvent(e).stopPropagation();fixEvent(e).preventDefault();} 
      }
      else
      {
       var container = this.lists[parseInt(obj.getAttribute('container'))-1];
       container.style.display = "block";
       this.resetstyle(container,d);
      } 
      this.stack.push(container);
      if(!obj.getAttribute('container'))
      {
       addListener(container,"mouseout",BindAsEventListener(this,this.Hide));
       this.lists.push(container)
       obj.setAttribute("container",this.lists.length);
       var Item  = null, _self = this;
       for(var i = 0,l = d.menu.length;i<l;i++)
       {
        (function(i){Item = create("div",container,function(o){
         if(d.menu[i].ico){o.innerHTML = "<img src = '"+d.menu[i].ico+"'>";}
         with(o){innerHTML = innerHTML+d.menu[i].txt; 
           setAttribute("menu",d.menu[i].menu?"true":"false");
           className = d.menu[i].menu?_self.l_bg_style:_self.l_style;
          } 
        })})(i);
        if(d.menu[i].group)create("span",container,function(o){o.className = _self.l_hr});
        if(!d.menu[i].exist){Item.className = _self.l_disabled;continue;};
        addListener(Item,"mouseover",BindAsEventListener(this,this.Makemenu,[d.menu[i],Item]));
        addListener(Item,"mouseout",BindAsEventListener(this,this.Hide,[Item]));
        Item.oncontextmenu = function(e){fixEvent(e).stopPropagation();fixEvent(e).preventDefault();}
        Item.onmouseup = function(e){fixEvent(e).stopPropagation();fixEvent(e).preventDefault();}
       }
      }
      else
      {
       this.lists[parseInt(obj.getAttribute('container'))-1].style.display = "block";
      }
      return container; 
     },
     Hide : function(e,o){
      o&&this.contains(o.parentNode,getNext(e))&&this.mouseout(e,o);
      var exist = false; 
      for(var index = 0,l = this.stack.length;index<l;index++)
      {
       if(this.contains(this.stack[index],getNext(e))){exist = true;break;} 
      };
      if(exist)
      {
       for(var i = index + 1;i<this.stack.length;i++)
       {this.stack[i].style.display = "none";} 
       this.stack.length = index + 1;
      }
      else
      {
       for(var i = 0;i<this.stack.length;i++)
       {this.stack[i].style.display = "none";}
       this.stack.length = 0;
      }
      if(this.stack.length == 0)this.obj.className = "";
     },
     mouseover : function(obj){
      for(var i=0,l=$$(obj.parentNode,this.elm).length;i<l;i++)
      {
       if($$(obj.parentNode,this.elm)[i].className ==this.l_disabled)continue;
       $$(obj.parentNode,this.elm)[i].className = $$(obj.parentNode,this.elm)[i].getAttribute("menu")=="true"?this.l_bg_style:this.l_style;
      }
      if(obj.className == this.l_disabled)return;
      obj.className = obj.getAttribute("menu")=="true"?this.l_bg_style1:this.l_style1
     },
     mouseout : function(e,obj){
      if(obj.className == this.l_disabled)return;
      obj.className = obj.getAttribute("menu")=="true"?this.l_bg_style:this.l_style;
     }, 
        contains: function(parent,child){
      if(!parent||!child)return false;
            if(parent == child) return true;
      return Sys.IE?parent.contains(child):(parent.compareDocumentPosition(child)==20)?true:false;
      return false;  
        },
     Bubble : function(e){
      fixEvent(e).stopPropagation();
     },
     Stopdefault : function(e){
      fixEvent(e).preventDefault();
     },
     pos : function(o,w,arg){
     //判断位置的计算方式
      if(arg=="X")
      {
       var xx = Sys.Chrome?document.body.clientWidth:document.documentElement.clientWidth;
       return (xx -getobjpos(o,1)-o.offsetWidth-5)>w.offsetWidth;
      }
      else
      {
       var xx = Sys.Chrome?document.body:document.documentElement;
       return (xx.clientHeight -getobjpos(o,0)+xx.scrollTop+o.offsetHeight-5)>w.offsetHeight;
      }
     },
     resetstyle : function(c,d){
      for(var i=0,l=$$(c,this.elm).length;i<l;i++)
      {
       $$(c,this.elm)[i].className = this.l_style; 
       if(d.menu[i].menu)$$(c,this.elm)[i].className  = this.l_bg_style;
       if(!d.menu[i].exist)$$(c,this.elm)[i].className = this.l_disabled;
      }
     }
    });
    var bg = null;
    var img = ["http://beta.hi.csdn.net/attachment/200909/29/79043_1254192282xH46.gif","http://beta.hi.csdn.net/attachment/200909/29/79043_1254192282ddCJ.gif","http://beta.hi.csdn.net/attachment/200909/29/79043_1254192282DoV1.gif"]
      

  2.   

    window.onload = function(){
        var data = [
     {txt:0,menu:[
      {ico:img[0],group:true,exist:true,txt:"大法师",menu:[
       {ico:img[1],group:false,exist:true,txt:"召唤水元素",menu:[
        {ico:img[2],group:false,exist:true,txt:"穿刺攻击"},{ico:img[0],group:false,exist:true,txt:"很强肉盾"},{ico:img[1],group:false,exist:true,txt:"对空对第"}
       ]},{ico:img[2],group:false,exist:true,txt:"强大暴风雪"},{ico:img[0],group:false,exist:true,txt:"辉煌光环"},{ico:img[1],group:false,exist:true,txt:"群体瞬间移动"}
      ]},
      {ico:img[2],group:false,exist:true,txt:"山丘之王",menu:[
       {ico:img[0],group:false,exist:true,txt:"风暴之锤"},{ico:img[1],group:false,exist:true,txt:"大铁锤敲地"},{ico:img[2],group:false,exist:true,txt:"35%几率锥晕"},{ico:img[0],group:false,exist:true,txt:"超级天神下凡"}
      ]},
      {ico:img[1],group:false,exist:true,txt:"圣骑士",menu:[
       {ico:img[2],group:false,exist:true,txt:"一束大光线"},{ico:img[0],group:false,exist:true,txt:"无敌就是无敌"},{ico:img[1],group:false,exist:true,txt:"专注光环啊"},{ico:img[2],group:false,exist:true,txt:"复活6个单位"}
      ]},
      {ico:img[0],group:false,exist:true,txt:"血法师",menu:[
       {ico:img[1],group:false,exist:true,txt:"一个燃烧蛋"},{ico:img[2],group:false,exist:true,txt:"吸蓝啊"},{ico:img[0],group:false,exist:true,txt:"虚无魔法加成"},{ico:img[1],group:false,exist:true,txt:"神鸟凤凰"}
      ]}
     ]},
     {txt:1,menu:[
      {ico:img[2],group:false,exist:false,txt:"剑圣"},
      {ico:img[0],group:false,exist:false,txt:"先知"},
      {ico:img[1],group:false,exist:true,txt:"牛头人酋长"},
      {ico:img[2],group:false,exist:true,txt:"小YY"} 
     ]},
     {txt:2,menu:[
      {ico:img[1],group:false,exist:true,txt:"死亡骑士"},
      {ico:img[0],group:false,exist:true,txt:"巫妖"},
      {ico:img[2],group:false,exist:false,txt:"恐惧魔王"},
      {ico:img[1],group:false,exist:false,txt:"小强王子"} 
     ]},
     {txt:3,menu:[
      {ico:img[1],group:false,exist:true,txt:"丛林守护者"},
      {ico:img[0],group:false,exist:true,txt:"女祭祀(虎MM)"},
      {ico:img[2],group:false,exist:true,txt:"守望者(SM女王)"},
      {ico:img[1],group:false,exist:true,txt:"恶魔猎手",menu:[{ico:img[0],group:false,exist:true,txt:"燃烧法力"},
      {ico:img[2],group:false,exist:true,txt:"禁祭火焰羽衣"},
      {ico:img[1],group:false,exist:true,txt:"一定的几率躲避"},
      {ico:img[0],group:false,exist:true,txt:"变身强大恶魔",menu:[{ico:img[0],group:false,exist:true,txt:"远程攻击"},{ico:img[0],group:false,exist:true,txt:"多500点血"},{ico:img[0],group:false,exist:true,txt:"变的高大帅气"},{ico:img[0],group:false,exist:true,txt:"混乱攻击模式",menu:[{ico:img[0],group:false,exist:true,txt:"无视对方防御"},{ico:img[0],group:false,exist:true,txt:"无视各种护甲"}]}]}]} 
     ]},
     ];
        var data1 = [
     {exist:true,txt:0,menu:[
      {exist:true,txt:"大法师",menu:[
       {exist:true,txt:"召唤水元素",menu:[
        {exist:true,txt:"穿刺攻击"},{exist:true,txt:"很强肉盾"},{exist:true,txt:"对空对第"}
       ]},{exist:true,txt:"强大暴风雪"},{exist:true,txt:"辉煌光环"},{exist:true,txt:"群体瞬间移动"}
      ]},
      {exist:true,txt:"山丘之王",menu:[
       {exist:true,txt:"风暴之锤"},{exist:true,txt:"大铁锤敲地"},{exist:true,txt:"35%几率锥晕"},{exist:true,txt:"超级天神下凡"}
      ]},
      {exist:true,txt:"圣骑士",menu:[
       {exist:true,txt:"水元素"},{exist:true,txt:"暴风雪"},{exist:true,txt:"辉煌光环"},{exist:true,txt:"瞬间移动"}
      ]},
      {exist:true,txt:"血法师",menu:[
       {exist:true,txt:"水元素"},{exist:true,txt:"暴风雪"},{exist:true,txt:"辉煌光环"},{exist:true,txt:"瞬间移动"}
      ]}
     ]},
     {exist:true,txt:1,menu:[
      {exist:true,txt:"剑圣"},
      {exist:true,txt:"先知"},
      {exist:true,txt:"牛头人酋长"},
      {exist:true,txt:"小YY"} 
     ]},
     {exist:true,txt:2,menu:[
      {exist:true,txt:"死亡骑士"},
      {exist:true,txt:"巫妖"},
      {exist:true,txt:"恐惧魔王"},
      {exist:true,txt:"小强王子"} 
     ]},
     {exist:true,txt:3,menu:[
      {exist:true,txt:"恶魔猎手"},
      {exist:true,txt:"丛林守护者"},
      {exist:true,txt:"女祭祀(虎MM)"},
      {exist:true,txt:"守望者(SM女王)"} 
     ]},
     ]; 
     new Menu($('right'),data,"div",{direction:"Y"}); 
     new Menu($('ss'),data,"div",{direction:"X"});
     new Menu($('sss'),data,"div");
     new Menu($('tt'),data1,"div",{direction:"Y",c_style:"tc",l_style:"tl tlist",l_style1:"tl tlistover",l_bg_style:"tl tbg",l_bg_style1 : "tl tbgover"}); 
    /*=======================================================================================================================*/
     $('yy').oncontextmenu = $('right').oncontextmenu = function(e){fixEvent(e).preventDefault();};
     $('yy').onselectstart = $('right').onselectstart = function(){return false;};
     $('yy').onmouseup = function(e){$('right').style.display = "none";var e = fixEvent(e);e.stopPropagation();show(e)};
     document.onmouseup = function(){$('right').style.display = "none"};
      
     function show(e){
      if(e.button==1){$('right').style.display = "none";return;}
      if(e.button==2)
      {
       $('right').style.display = "block";
       $('right').style.top  = e.pageY + "px";
       $('right').style.left = e.pageX + "px"; 
      }  
     } 
    }
    </script>
    </body>
    </html>
      

  3.   

    在你要加链接的地方加上超级链接就行了啊。
    例如："<a href='#'>牛头人酋长</a>"
    记住里面一定要' '用这种符号。不然起冲突
      

  4.   

    <a href='javascript:函数名称'>