请javascript高手帮忙看一下为什么子导航的链接会无效？

chenf4hua12 2009-12-23 07:24:52

请高手帮忙看一下为什么子导航的链接会无效？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>代码调试</title>
<style type="text/css">

.main_left_list{ width:210px; height:auto; margin:0; padding:0; border:#CCCCCC;}
.main_left_list ul li{margin:5px auto; font-size:13px; height:20px; letter-spacing:2px; line-height:20px; text-indent:42px; background:url(../images/bg.png) no-repeat -620px -362px; border-bottom:1px dashed #dddddd;}
.main_left_list ul li span{ cursor:pointer;}
.main_left_list ul span{ float:left;z-index:10; padding:6px 6px 6px 0px;width:340px; border:1px solid #dddddd; position: absolute; display:block;background:#caf1f1; filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=120, color=#cccccc);}
.main_left_list .over{ position:relative;border:1px solid #86e5f0; padding:0px; border-bottom:1px solid #caf1f1; margin:-1px 0 0 -1px; z-index:1000; color:#ff6026; text-decoration:underline; background:#caf1f1; height:22px; }
.main_left_list .block{ display:block;}
.main_left_list .none{ display:none;}
</style>
<script language="javascript">
function XMenu(o){
this.$ = function(o){ return document.getElementById(o);}
this.$$ = function(o, str){ return o.getElementsByTagName(str);}
this.obj = o;
this.bind();
}
XMenu.prototype = {
bind : function(){
var xxx = this.$(this.obj);
var xdt = this.$$(xxx, 'strong');
var xdd = this.$$(xxx, 'span');
var xdtl = xdt.length;
xxx['obj'] = xdt[0];
for(var i=0; i<xdtl; i++){
xdt[i]['span'] = xdd[i];
xdt[i]['div'] = xxx;
xdt[i].onmouseover = function(){
this['div']['obj'].className = '';
this['div']['obj']['span'].className = 'none';
this.className = 'over';
this['span'].className = 'block';
this['div']['obj'] = this;
}
}
xxx.onmouseout = function(){
var d = this;
this.hide = setTimeout(function(){
d['obj'].className = '';
d['obj']['span'].className = 'none';
d = null;
},0);
}
xxx.onmouseover = function(){
if(this.hide){
clearTimeout(this.hide);
}
}
}
}
window.onload = function (){
new XMenu('warpper');
}
</script>
</head>
<body>
<div class="main_left_list">
<ul id="warpper">
<li><strong>导航1</strong>
<span class="none">
<ul>
<li><a herf="http://www.hao123.com">好123</a></li>
</ul>
</span></li>
<li><strong>导航2</strong>
<span class="none">
<ul>
<li><a herf="http://www.baidu.com">百度</a></li>
</ul>
</span></li>
</ul>
</div>
</body>
</html>

...全文

42 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

qqzeng-ip 2009-12-23

打赏
举报

去掉/也可以你知道为什么没有反应吗
你原来那个a都不是链接虽然看上去一模一样
问题就出在这里

qqzeng-ip 2009-12-23

打赏
举报

没有问题少了 /

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />





<title>代码调试 </title> 

<style type="text/css"> 



.main_left_list{ width:210px; height:auto; margin:0; padding:0; border:#CCCCCC;} 

.main_left_list ul li{margin:5px auto; font-size:13px; height:20px; letter-spacing:2px; line-height:20px; text-indent:42px; background:url(../images/bg.png) no-repeat -620px -362px; border-bottom:1px dashed #dddddd;} 

.main_left_list ul li span{ cursor:pointer;} 

.main_left_list ul span{ float:left;z-index:10; padding:6px 6px 6px 0px;width:340px; border:1px solid #dddddd; position: absolute; display:block;background:#caf1f1; filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=120, color=#cccccc);} 

.main_left_list .over{ position:relative;border:1px solid #86e5f0; padding:0px; border-bottom:1px solid #caf1f1; margin:-1px 0 0 -1px; z-index:1000; color:#ff6026; text-decoration:underline; background:#caf1f1; height:22px; } 

.main_left_list .block{ display:block;} 

.main_left_list .none{ display:none;} 

</style> 

<script language="javascript"> 

function XMenu(o){ 

  this.$ = function(o){ return document.getElementById(o);} 

  this.$$ = function(o, str){ return o.getElementsByTagName(str);} 

  this.obj = o; 

  this.bind(); 

} 

XMenu.prototype = { 

  bind : function(){ 

  var xxx = this.$(this.obj); 

  var xdt = this.$$(xxx, 'strong'); 

  var xdd = this.$$(xxx, 'span'); 

  var xdtl = xdt.length; 

  xxx['obj'] = xdt[0]; 

  for(var i=0; i <xdtl; i++){ 

    xdt[i]['span'] = xdd[i]; 

    xdt[i]['div'] = xxx; 

    xdt[i].onmouseover = function(){ 

    this['div']['obj'].className = ''; 

    this['div']['obj']['span'].className = 'none'; 

    this.className = 'over'; 

    this['span'].className = 'block'; 

    this['div']['obj'] = this; 

    } 

  } 

  xxx.onmouseout = function(){ 

    var d = this; 

    this.hide = setTimeout(function(){ 

    d['obj'].className = ''; 

    d['obj']['span'].className = 'none'; 

    d = null; 

    },0); 

  } 

  xxx.onmouseover = function(){ 

    if(this.hide){ 

    clearTimeout(this.hide); 

    } 

  } 

  } 

} 

window.onload = function (){ 

  new XMenu('warpper'); 

} 

</script> 

</head> 

<body> 

<div class="main_left_list"> 

<ul id="warpper"> 

  <li> <strong>导航1 </strong> 

  <span class="none"> 

  <ul> 

    <li><a href="http://www.google.cn/">hao123</a></li> 

  </ul> 

  </span> </li> 

  <li> <strong>导航2 </strong> 

  <span class="none"> 

  <ul> 

    <li> <a href="http://www.baidu.com/">baidu</a> </li> 

  </ul> 

  </span> </li> 

</ul> 

</div> 

</body> 

</html>