javascript闭包实例

  1 <!doctype html>
  2 <html lang="en">
  3     <head>
  4       <meta charset="UTF-8">
  5         <title>
  6         javascript闭包实例
  7         </title>
  8         <style>
  9             #pmenu { margin-left: auto;margin-right: auto;}
 10             ul.adminLeftNav{width:140px;border:1px solid #A8C8EE;border-bottom:0px;list-style:none;margin:0;padding:0;text-align:left;} 
 11             ul.adminLeftNav li{ line-height:34px;font-size:12px;color:#0B6BB3;font-weight:bold;border-bottom:1px solid #A8C8EE; 
 12             background:url(/eaf/images/cmail_7.gif) no-repeat 20px 12px;text-indent:40px;cursor:pointer;background-color:#FFFFFF;} 
 13             ul.adminLeftNav li:hover{background-color:#C4E7DE;} 
 14             ul.adminLeftNav li.hover{background-color:#C4E7DE;} 
 15             ul.adminLeftNav li div{display:none;border-top:1px solid #A8C8EE;padding:5px 0;background:#fff;}
 16             ul.adminLeftNav li div a{display:block;line-height:20px;text-indent:30px;font-weight:normal;color:#000;text-decoration:none;} 
 17             ul.adminLeftNav li div a:hover{text-decoration:underline;}
 18         </style>
 19         <script type="text/javascript">
 20             window.onload = function() {
 21                var obj1 = document.getElementById("pmenu").getElementsByTagName("li"); 
 22                 for(var i=0;i<obj1.length;i++) 
 23                 { 
 24                     //闭包实现给对象添加事件 
 25                     (function(){ 
 26                         var temp = obj1[i]; 
 27                         temp.onmouseover = function(){temp.className='hover';} 
 28                         } 
 29                      )(); 
 30                     (function(){ 
 31                         var temp = obj1[i]; 
 32                         temp.onmouseout = function(){temp.className='';} 
 33                         } 
 34                      )(); 
 35                      (function(){            
 36                         var idNum = i; 
 37                         obj1[idNum].onclick = function(){showChildMenu('p1'+idNum,'#',idNum+1);} 
 38                         } 
 39                      )(); 
 40                 } 
 41                 // idNum作为内部函数变量被传递出来
 42                 function showChildMenu(id,url,num){ 
 43                     alert("您点击的是第"+ num +"个菜单");
 44                     var obj = document.getElementById("pmenu").getElementsByTagName("div"); 
 45                     for(var i=0;i<obj.length;i++) 
 46                     { 
 47                         obj[i].style.display='none'; 
 48                     } 
 49                     if(id!='')  {
 50                         document.getElementById(id).style.display='block'; 
 51                     }
 52                 }
 53             }
 54         </script>
 55     </head>
 56     
 57     <body>
 58        <ul id="pmenu" class="adminLeftNav">    
 59             <li >菜单1 
 60                 <div id="p10"> 
 61                     <a href="#">菜单</a> 
 62                     <a href="#">菜单</a> 
 63                     <a href="#">菜单</a> 
 64                 </div> 
 65             </li> 
 66             <li >菜单2 
 67                 <div id="p11"> 
 68                     <a href="#">菜单</a> 
 69                     <a href="#">菜单</a> 
 70                     <a href="#">菜单</a> 
 71                     <a href="#">菜单</a> 
 72                     <a href="#">菜单</a> 
 73                 </div> 
 74             </li> 
 75             <li >菜单3 
 76                 <div id="p12"> 
 77                     <a href="#">菜单</a> 
 78                     <a href="#">菜单</a> 
 79                     <a href="#">菜单</a> 
 80                     <a href="#">菜单</a> 
 81                     <a href="#">菜单</a> 
 82                 </div> 
 83             </li> 
 84             <li >菜单4 
 85                 <div id="p13"> 
 86                     <a href="#">菜单</a> 
 87                     <a href="#">菜单</a> 
 88                     <a href="#">菜单</a> 
 89                     <a href="#">菜单</a> 
 90                     <a href="#">菜单</a> 
 91                 </div>   
 92             </li> 
 93             <li >菜单5 
 94                 <div id="p14"> 
 95                     <a href="#">菜单</a> 
 96                     <a href="#">菜单</a> 
 97                     <a href="#">菜单</a> 
 98                     <a href="#">菜单</a> 
 99                 </div> 
100             </li> 
101             <li >菜单6 
102                 <div id="p15"> 
103                     <a href="#">菜单</a> 
104                 </div> 
105             </li> 
106         </ul>
107     </body>
108 </html>
posted on 2014-04-18 15:31 Shower稻草人阅读(409) 评论(0) 收藏举报