javascript闭包实例

来源：互联网发布：莫言丑化知乎编辑：程序博客网时间：2024/05/17 09:45
<!doctype html><html lang="en">    <head>      <meta charset="UTF-8">        <title>        javascript闭包实例        </title>        <style>            #pmenu { margin-left: auto;margin-right: auto;}            ul.adminLeftNav{width:140px;border:1px solid #A8C8EE;border-bottom:0px;list-style:none;margin:0;padding:0;text-align:left;}             ul.adminLeftNav li{ line-height:34px;font-size:12px;color:#0B6BB3;font-weight:bold;border-bottom:1px solid #A8C8EE;             background:url(/eaf/images/cmail_7.gif) no-repeat 20px 12px;text-indent:40px;cursor:pointer;background-color:#FFFFFF;}             ul.adminLeftNav li:hover{background-color:#C4E7DE;}             ul.adminLeftNav li.hover{background-color:#C4E7DE;}             ul.adminLeftNav li div{display:none;border-top:1px solid #A8C8EE;padding:5px 0;background:#fff;}            ul.adminLeftNav li div a{display:block;line-height:20px;text-indent:30px;font-weight:normal;color:#000;text-decoration:none;}             ul.adminLeftNav li div a:hover{text-decoration:underline;}        </style>        <script type="text/javascript">            window.onload = function() {               var obj1 = document.getElementById("pmenu").getElementsByTagName("li");                 for(var i=0;i<obj1.length;i++)                 {                     //闭包实现给对象添加事件                     (function(){                         var temp = obj1[i];                         temp.onmouseover = function(){temp.className='hover';}                         }                      )();                     (function(){                         var temp = obj1[i];                         temp.onmouseout = function(){temp.className='';}                         }                      )();                      (function(){                                    var idNum = i;                         obj1[idNum].onclick = function(){showChildMenu('p1'+idNum,'#',idNum+1);}                         }                      )();                 }                 // idNum作为内部函数变量被传递出来                function showChildMenu(id,url,num){                     alert("您点击的是第"+ num +"个菜单");                    var obj = document.getElementById("pmenu").getElementsByTagName("div");                     for(var i=0;i<obj.length;i++)                     {                         obj[i].style.display='none';                     }                     if(id!='')  {                        document.getElementById(id).style.display='block';                     }                }            }        </script>    </head>        <body>       <ul id="pmenu" class="adminLeftNav">                <li>菜单1                 <div id="p10">                     <a href="#">菜单</a>                     <a href="#">菜单</a>                     <a href="#">菜单</a>                 </div>             </li>             <li>菜单2                 <div id="p11">                     <a href="#">菜单</a>                     <a href="#">菜单</a>                     <a href="#">菜单</a>                     <a href="#">菜单</a>                     <a href="#">菜单</a>                 </div>             </li>             <li>菜单3                 <div id="p12">                     <a href="#">菜单</a>                     <a href="#">菜单</a>                     <a href="#">菜单</a>                     <a href="#">菜单</a>                     <a href="#">菜单</a>                 </div>             </li>             <li>菜单4                 <div id="p13">                     <a href="#">菜单</a>                     <a href="#">菜单</a>                     <a href="#">菜单</a>                     <a href="#">菜单</a>                     <a href="#">菜单</a>                 </div>               </li>             <li>菜单5                 <div id="p14">                     <a href="#">菜单</a>                     <a href="#">菜单</a>                     <a href="#">菜单</a>                     <a href="#">菜单</a>                 </div>             </li>             <li>菜单6                 <div id="p15">                     <a href="#">菜单</a>                 </div>             </li>         </ul>    </body></html>
0 0