一个简单的Tab选项卡点击事件。

<style type="text/css">
ul{padding:0;margin:0;}
.tab{width:400px;}
.tab-menuWrapper{padding-left:20px;}
.tab-menuWrapper li{
    float:left;display:inline;
    padding:5px;border:1px solid #333;border-bottom:none;margin-right:5px;
}
.tab-contentWrapper{border:1px solid #333;clear:left;padding:5px;}
</style>


<div>
    <ul><li>menu1</li><li>menu2</li><li>menu3</li></ul>
    <div>
        <div>content1</div>
        <div>content2</div>
        <div>content3</div>
    </div>
</div>

然后我们需要一点js来实现，鼠标点击时content内容的切换。

<script type="text/javascript">
    var tabMenu=document.getElementById("tab-menuWrapper").getElementsByTagName("li");
    var tabContent=document.getElementById("tab-contentWrapper").getElementsByTagName("div");
    for(var i=0;i<tabmenu .length;i++)
    {　　
        tabMenu[i].οnclick=function()
        { 
     　　    for(var j=0;j<tabContent.length;j++)
     　　    {
 　　    　　    tabContent[j].style.display="none"; 
 　　        }
 　　        tabContent[i].style.display="block";  
　　    }
　　}
</script>


我们希望借助于数组和循环来完成这个任务，但是我们发现上述代码不能完成我们的任务，会报错：“tabContent[i] is undefined”。我们利用alert（i）检测一下。

for(var i=0;i<tabmenu.length;i++)
{　　
    tabMenu[i].οnclick=function()
    {
    　　　　alert(i);  //3,3,3 why???
    　　　　for(var j=0; j<tabContent.length; j++){
    　　　　　　　tabContent[j].style.display="none";
    　　　　}
    　　　　tabContent[i].style.display="block";  
　　}
}


当我们点击tabMenu1,2,3时，不是弹出0,1,2而是弹出3,3,3。所以后面的tabContent[i]会是undefined。（tabContent[i]中i实际上只有0,1,2）解决这个问题，我们可以使用闭包。

for(var i=0;i<tabmenu.length;i++)
{
    (function(_i){
    　　tabMenu[_i].οnclick=function(){
    　　　　　　for(var j=0;j<tabContent.length;j++){
    　　　　　　　　　　tabContent[j].style.display="none";　　　　
    　　　　　　}
    　　　　　　tabContent[_i].style.display="block"; 
　　    }
　　})(i);
}


或者我们给DOM节点添加_index属性，属性值等于索引：

for(var i=0;i<tabmenu.length;i++){
  tabMenu[i]._index=i;
  tabMenu[i].οnclick=function(){
  for(var j=0;j<tabContent.length;j++){
         tabContent[j].style.display="none"; 
　　　}
　　　tabContent[this._index].style.display="block"; 
　 }
}