JavaScript实战练习之-Tag标签

新手刚开始学习JS未免有些急躁，迫切的想知道一些网站“特效”是怎么实现的。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>
</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; }

HTML、CSS部分很简单易懂，这里就不多诠释了

JS部分：

window.οnlοad=function(){  
  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() {  
          for(var n=0; n<len; n++) {
             tag[n].className="";
             content[n].style.display="none";  
	      }
          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原理知识。