js闭包的应用

 1      <ul id="ul1">
 2         <li style="border:1px solid red;">1</li>
 3         <li style="border:1px solid red;">2</li>
 4         <li style="border:1px solid red;">3</li>
 5      </ul>
 6 
 7      <div id="div1">
 8          <div style="background: red;height:300px;display:block;"></div>
 9          <div style="background: green;height:300px;display:none;"></div>
10          <div style="background: blue;height:300px;display:none;"></div>
11      </div>
12 
13 <a href="http://www.baidu.com" target=“_blank”>link<a>
 1       window.onload = function(){
 2              var oLis = document.getElementById("ul1").getElementsByTagName('li');
 3              for(var i=0; i< oLis.length; i++){
 4                  oLis[i].onclick = (function(i){
 5                        return function(){
 6                          oDiv._change_tab(i);
 7                       }
 8                  })(i);
 9              }
10         }
11 
12         var oDiv = {
13             _change_tab: function(index){
14                  var oDivs = document.getElementById("div1").getElementsByTagName("div");
15                  var oCur_Slibs = oDiv._get_sliblings(oDivs[index], oDivs);
16                  oDivs[index].style.display = "block";
17                  for(var n=oCur_Slibs.length-1; n >= 0; n--){
18                      oCur_Slibs[n].style.display = "none";
19                 }             
20             },
21             _get_sliblings: function(currentNode, childNodes){
22                 var slibsList = [];
23                 for(var n= childNodes.length-1; n>=0; n--){
24                      if(childNodes[n].nodeType === 1 && childNodes[n] !== currentNode){
25                           slibsList.push(childNodes[n]);
26                      }
27                 }
28                 return slibsList;
29             }
30         }
31 
32         window.onbeforeunload =  function close(){
33             var oLis = document.getElementById("ul1").getElementsByTagName('li');
34             for(var n= oLis.length-1; n>=0; n--){
35                 oLis[i].onclick = null;
36                 console.log(i);
37                 alert(i);
38             }
39         }   

 

posted @ 2014-10-30 00:32  未来动力  阅读(225)  评论(0编辑  收藏  举报