JS 实现 Tab标签切换功能

Tab标签切换

效果图：

JS 实现 Tab标签切换功能

HTML部分:

<div class="wrap">

<ul id="tag">

<li class="current" >标签一</li>

<li>标签二</li>

<li>标签三</li>

</ul>

<div id="tagContent">

<div> 内容一<br>内容一 </div>

<div> 内容二<br>内容二 </div>

<div> 内容三<br>内容三 </div>

</div>

CSS:

*{margin:0;padding:0;}

.wrap{width:500px; margin:10px auto; }

#tag{ width:498px; overflow:hidden; background:#000; border:1px solid #000; }

#tag li{list-style:none; float:left; margin-right:0px; color:white; padding:5px 20px; cursor: pointer;}

#tag .current{ color:#000; background:#ccc; }

#tagContent div{ width:498px; border:1px solid #000; border-top:none; height:300px; display:none; }

　　
JS部分：

window.onload=function() //onload 事件句柄，文档装载结束时调用

{
var tag=document.getElementById("tag").children; //获取Tag下的li，即Tag标签
var content=document.getElementById("tagContent").children; //获取Tag标签对应的内容
content[0].style.display = "block"; //默认显示第一个标签的内容
var len= tag.length;
for(var i=0; i<len; i++)   //无论点击谁都能实现当前显示，其余隐藏
    {
tag[i].index=i; //为何如此？（看下面解释）
  tag[i].onclick = function()     //0级DOM的事件句柄注册

{

for(var n=0; n<len; n++)

              {
                tag[n].className="";
                content[n].style.display="none";
             }   //首先将全部的div隐藏
            tag[this.index].className = "current";
         content[this.index].style.display = "block";
     }
   }

}

解释：代码涉及了JS的闭包。

闭包：函数能访问定义他们的外部函数的变量和参数（除了this、arguments）。尤其重要的是他们取得的是外部变量的最后一个值！也就是

tag[i].onclick=function()  { alert(i); //3  }

弹出的都是3，因为3是for循环中 i 最终的值。解决办法就是为每个tag[i]添加一个index值，在函数内部通过this.index调用即可与 i 同步

代码同时也涉及this的取值问题.

tag[i].onclick=function() { alert(this); // DOM元素  }

操作DOM事件时（如onclick、onmouseover..）函数中的this指向的是该元素，而不是全局变量或所在对象。

如换成

var a=function(){ alert(this);//window }

this则指向window对象。

可看出，虽然仅仅是个很简单的Tag标签切换功能，但也能涉及很多JS原理知识。

原文链接：http://blog.csdn.net/wangxiaohui6687/article/details/8523079

JS 实现 Tab标签切换功能

相关推荐