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>
</div>

  

CSS: 

*{margin:0;padding:0;}
 .wrap{width:500pxmargin:10px auto; }
 #tag{ width:498pxoverflow:hiddenbackground:#000border:1px solid #000; }
 #tag li{list-style:nonefloat:leftmargin-right:0pxcolor:whitepadding:5px 20pxcursorpointer;}
 #tag .current{ color:#000background:#ccc; }
 #tagContent div{ width:498pxborder:1px solid #000border-top:noneheight:300pxdisplay: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