js导航条 二级滑动 模仿块级作用域
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{ 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; }