以tab选项卡效果为例：
网页中的选项卡效果
如图。
在鼠标点击规则标题的时候下面内容就会切换成规则的内容，这就是一个选项卡切换效果了。
标题和其内容是一一对应的。
在点击的时候就需要得到当前点击的索引号，用jquery的话可以直接通过.index()获取当时元素的索引值，那么用js呢？下面我们来利用js的闭包来实现获取索引。
页面代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <style> 9 #box{width:255px;height:20px;list-style: none;} 10 #box li{float:left;line-height: 20px;width:49px;border:1px #000 solid;text-align: center;cursor: pointer;} 11 </style> 12 <ul id="box"> 13 <li>1</li> 14 <li>2</li> 15 <li>3</li> 16 <li>4</li> 17 <li>5</li> 18 </ul> 19 <script> 20 var box = document.getElementById('box'), 21 liTag = box.getElementsByTagName('li'), 22 length = liTag.length, 23 i = 0; 24 for(;i<length;i++){ 25 liTag[i].onclick = (function(i){ 26 return function(){ 27 alert(i); 28 } 29 })(i); 30 } 31 </script> 32 33 </body> 34 </html>
在onclick事件执行一个(function(){})()的闭包操作，把每次点击的i传进去这样就能保存起来，从而得到当前的索引值，索引得到了，那选项卡实现起来就简单了对吧。