<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>原生JavaScript封装选项卡插件</title> <style> * {margin: 0; padding: 0; font-family: "\5FAE\8F6F\96C5\9ED1", Helvetica, sans-serif; font-size: 14px;-webkit-user-select: none;} ul,li{list-style:none; } .box{ width:500px;margin:20px auto; } .box ul{ position:relative; top:1px; } .box ul:after{ content:""; display:block; clear:both; } .box ul li{ float:left; margin-right:15px; width:100px; height:30px; border:1px solid green; text-align:center; cursor:pointer; } .box ul li.selected{ background:lightblue; border-bottom-color:lightblue } .box div{ height:150px; line-height:150px; background:lightblue; border:1px solid green; text-align: center; display: none; } .box div.selected{display: block;} </style> </head> <body> <div class="box" id="tabFir"> <ul> <li class="selected">页卡一</li> <li>页卡二</li> <li>页卡三</li> </ul> <div class="selected">内容一</div> <div>内容二</div> <div>内容三</div> </div> </body> <script> window.onload = function(){ var tabFir = document.getElementById(‘tabFir‘), oLis = tabFir.getElementsByTagName(‘li‘), oDivs = tabFir.getElementsByTagName(‘div‘); debugger; for (var i = 0; i < oLis.length; i++) { (function (num){ oLis[i].onclick = function(){ //这个匿名函数在匿名函数自执行的内部，这两者 //形成了一个闭包 changeTab(num); //最外层的每个匿名函数，就算执行环境被销毁了， //但是由于changeTab(num),要引用其活动对象num //所以活动对象仍然会留在内存中。 //由于在调用每个匿名函数时，我们传入了变量i.由于函数参数 /*是按值传递的，所以会将变量i的当前值，复制给参数num,而这个匿名函数 内部，又创建并返回num的闭包，这样一来，每个onclick回调函数都有自己 num变量的一个副本。因此可以返回各自不同的数值。 * */ } })(i); } //按值传递 function changeTab(n) { for (var i = 0; i < oLis.length; i++) { oLis[i].className = null; oDivs[i].className = null; } oLis[n].className = ‘selected‘; oDivs[n].className = ‘selected‘; } } </script> </html>
