<!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>原生js开发tab选项卡之闭包
原文地址：http://www.cnblogs.com/qianxunpu/p/8037438.html