for(var i = 1;i<7;i++){
//因为首级标题有6个，对每个首级标题添加mouseover和mouseout事件。
//这里用到块级作用域(function(k){document.getElementById("p_"+k).addEventListener('mouseover',function(event){document.getElementById('p_1').className = 'm_li';document.getElementById('cp_1').className = 'aa';this.className = 'm_li_f';document.getElementById("cp_"+k).style.display="block";},false);document.getElementById("p_"+k).addEventListener('mouseout',function(event){this.className = 'm_li';document.getElementById("cp_"+k).style.display="none";},false);})(i);
}
//如果没有用到块级作用域，改为 for(var i = 1;i<7;i++){document.getElementById("p_"+i).addEventListener('mouseover',function(event){//此时i永远是指7，这里的i永远指for语句里面i最后取值。document.getElementById('p_1').className = 'm_li'; document.getElementById('cp_1').className = 'aa'; this.className = 'm_li_f'; document.getElementById("cp_"+i).style.display="block";},false); document.getElementById("p_"+i).addEventListener('mouseout',function(event){ this.className = 'm_li'; document.getElementById("cp_"+i).style.display="none"; //此时i永远是指7，这里的i永远指for语句里面i最后取值。},false)； }下载地址：http://files.cnblogs.com/qduanlu/js%E5%AF%BC%E8%88%AA%E6%A0%8F.rar
<!DOCTYPE html>
<html>
<head><meta charset='utf-8'/><link rel="stylesheet" type='text/css' href='css/1.css'/>
</head>
<body><div id="menu"><ul id='menu_ul'><li class="m_line"><img src="images/line1.gif" /></li><li class="m_li_f" id="p_1"><a href="javaScript:void(0)">首页</a></li><li class="m_line"><img src="images/line1.gif" /></li><li class="m_li" id="p_2"><a href="javaScript:void(0)">jquery 特效</a></li><li class="m_line"><img src="images/line1.gif" /></li><li class="m_li" id="p_3"><a href="javaScript:void(0)">javascript特效</a></li><li class="m_line"><img src="images/line1.gif" /></li><li class="m_li" id="p_4"><a href="javaScript:void(0)">flash特效</a></li><li class="m_line"><img src="images/line1.gif" /></li><li class="m_li" id="p_5"><a href="javaScript:void(0)">div+css教程</a></li><li class="m_line"><img src="images/line1.gif" /></li><li class="m_li" id="p_6"><a href="javaScript:void(0)">html5教程</a></li><li class="m_line"><img src="images/line1.gif" /></li></ul></div><div id="subbox"><ul id="smenu"><li style="padding-left:29px;" id="cp_1">jsfoot 教程</li><li style="padding-left:143px" class="aa" id="cp_2"><a href="javaScript:void(0)" title="jquery图片特效" >jquery图片特效</a>| <a href="javaScript:void(0)" title="jquery导航菜单">jquery导航菜单</a>| <a href="javaScript:void(0)" title="jquery选项卡特效">jquery选项卡</a></li><li style="padding-left:257px;" class="aa" id="cp_3"><a href="javaScript:void(0)" title="jquery图片特效">jquery图片特效</a>| <a href="javaScript:void(0)" title="jquery导航菜单">jquery导航菜单</a>| <a href="javaScript:void(0)" title="jquery选项卡特效">jquery选项卡</a></li><li style="padding-left:371px;" class="aa" id="cp_4"><a href="javaScript:void(0)" title="jquery图片特效">jquery图片特效</a>| <a href="javaScript:void(0)" title="jquery导航菜单">jquery导航菜单</a>| <a href="javaScript:void(0)" title="jquery选项卡特效">jquery选项卡</a></li><li style="padding-left:485px;" class="aa" id="cp_5"><a href="javaScript:void(0)" title="jquery图片特效">jquery图片特效</a>| <a href="javaScript:void(0)" title="jquery导航菜单">jquery导航菜单</a>| <a href="javaScript:void(0)" title="jquery选项卡特效">jquery选项卡</a></li><li style="padding-left:371px;" class="aa" id="cp_6"><a href="javaScript:void(0)" title="jquery图片特效">jquery图片特效</a>| <a href="javaScript:void(0)" title="jquery导航菜单">jquery导航菜单</a>| <a href="javaScript:void(0)" title="jquery选项卡特效">jquery选项卡</a></li></ul></div><script type="text/javascript" src="js/1.js"></script>
<body>
</html>
*{margin : 0;padding : 0;list-style-type: none;text-decoration: none;
}
body{font-family:Tahoma, Verdana, Arial, sans-serif;font-size:12px;color:#333333;
}
a,img{border:0;
}
a:hover{color : #FF0000;text-decoration: none;
}
#menu{height : 32px;margin-top : 8px;background-color: #990000;
}
#menu ul{width : 778px;height : 32px;margin : 0 auto;
}
#menu ul>li{float : left;
}
.m_line{width:1px;height : 32px;line-height:32px;
}
.m_li_f{width:114px;height:32px;line-height:32px;text-align:center;padding-top:4px;font-weight:bold;background:url(../images/menu_bg.jpg);position:relative;margin:-4px -2px 0 -2px;
}
.m_li_f a{display:block;color:#FF0000;width:114px;
}.m_li{width:114px;height:32px;line-height:32px;text-align:center;margin:0px -2px;
}
.m_li a{color:#FFFFFF;width:114px;display: block;
}
#subbox{height:32px;background-color:#F1F1F1;
}
#subbox #smenu{width:810px;margin:0px auto;height:32px;
}
#smenu li{line-height:32px;height:32px;
}
.aa{display: none;
}
.bb{display: block;
}
