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)； }
下载地址：https://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{
1px;
height : 32px;
line-height:32px;
}
.m_li_f{
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;
114px;
}
.m_li{
114px;
height:32px;
line-height:32px;
text-align:center;
margin:0px -2px;
}
.m_li a{
color:#FFFFFF;
114px;
display: block;
}
#subbox{
height:32px;
background-color:#F1F1F1;
}
#subbox #smenu{
810px;
margin:0px auto;
height:32px;
}
#smenu li{
line-height:32px;height:32px;
}
.aa{
display: none;
}
.bb{
display: block;
}