js利用tab键切换当前页面_JS 实现 Tab标签切换功能

效果图：

HTML部分:

• 标签一
• 标签二
• 标签三

内容一
内容一

内容二
内容二

内容三
内容三

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.οnlοad=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

{

tag[i].index=i; //为何如此？(看下面解释)

tag[i].onclick = function()     //0级DOM的事件句柄注册

{

for(var n=0; 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].οnclick=function() { alert(i); //3 }

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

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

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

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

如换成

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

this则指向window对象。

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