利用js闭包获取索引号

以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传进去这样就能保存起来，从而得到当前的索引值，索引得到了，那选项卡实现起来就简单了对吧。
posted @ 2015-06-12 16:20  年少、  阅读(1082)  评论(0)  编辑  收藏  举报