腾讯首页的每个新闻栏目都是一个tab选项卡切换,属于延迟动作的:鼠标hover上去之后200毫秒才会切换,防止了因为浏览滑动导致的页面上选项卡的频繁切换。仿照这样的效果,自己写了一个js插件,实现了低版本浏览器IE7-8的兼容,没有用库,纯js写的。

  难点的话就是如何实现延时动作,我想到的办法是用setTimeOut函数,期间要遍历Tabhead中的a节点进行绑定事件,写了一个很逗的闭包向setTimeOut传入循环变量。

 

  核心js部分代码如下:

  1 /*
  2 *   仿Tencent 选项卡延迟切换
  3 *   参数:TabID,Tab标题的选中class,延迟时间
  4 *
  5 */
  6 
  7     //为数组对象添加判断子元素方法
  8     Object.prototype.isIn = function(item){
  9         var i = this.length; 
 10         while (i--) { 
 11             if ( item === this[i]) { 
 12               return true; 
 13             } 
 14         } 
 15         return false; 
 16     };
 17     Object.prototype.getPos = function(item){
 18         var i = this.length; 
 19         while (i--) { 
 20             if ( item === this[i]) { 
 21               return i; 
 22             } 
 23         } 
 24         return -1; 
 25     };
 26     //TabBar对象
 27     var TabBar = function(eId,className,delayTime){
 28         //防止漏写new导致bug  js设计模式里推荐 感觉比较鸡肋
 29         if(!(this instanceof TabBar)){
 30             return new TabBar(eId,className,delayTime);
 31         }
 32         //el:Tab组件对应的元素 
 33         //showNum:当前显示的Tab子栏序号,从0开始
 34         //selectClass:Tab标题栏选中class样式
 35         //delayTime: 鼠标延迟时间
 36         //hd,sub数组:tab头元素和tabSub元素数组
 37         this.el = document.getElementById(eId||"tab");
 38         this.showNum = 0;
 39         this.selectClass = className || "selected";
 40         this.delayTime = delayTime || 200;
 41         this.hd = this.el.getElementsByTagName("div")[0].getElementsByTagName("a");
 42         this.sub = this.el.getElementsByTagName("div")[1].querySelectorAll(".sub_item");
 43         //类初始化最后执行bind函数
 44         this.bindListener();
 45     }
 46     
 47     TabBar.prototype.show = function() {
 48         //用于显示当前ShowNum对应的Tab项
 49         this.sub[this.showNum].style.display ="block";
 50     };
 51     TabBar.prototype.hide = function() {
 52         //用于取消显示当前ShowNum对应的Tab项
 53         (this.sub[this.showNum]).style.display ="none";
 54     };
 55     TabBar.prototype.bindListener = function() {
 56         //绑定hover事件 self局部变量传递this,addEventListener默认对象为window
 57         var self = this;
 58         if(this.el.addEventListener == undefined){
 59             //兼容IE7,8
 60             var i =0;
 61             for( i=0;i<this.hd.length;i++){
 62                 this.hd[i].attachEvent("onmouseover",(function(pos){
 63                     return function (){
 64                         (self.hd[pos]).timer = setTimeout(function(){
 65                             self.switchTab(pos);
 66                         },self.delayTime);
 67                     }
 68                 })(i));
 69                 this.hd[i].attachEvent("onmouseout",(function(pos){
 70                     return function (){
 71                         clearTimeout( self.hd[pos].timer );
 72                     }
 73                 })(i));
 74             }
 75         }
 76         else{
 77             //非IE7,8 addEventListener绑定
 78             this.el.addEventListener("mouseover",function(event){
 79                 if( self.hd.isIn(event.target) ){
 80                     var pos = self.hd.getPos(event.target);
 81                     (self.hd[pos]).timer = setTimeout(function(){
 82                         self.switchTab(pos);
 83                     },self.delayTime);
 84                 }
 85             });
 86             this.el.addEventListener("mouseout",function(event){
 87                 if( self.hd.isIn(event.target) ){
 88                     var pos = self.hd.getPos(event.target);
 89                     clearTimeout( self.hd[pos].timer );
 90                 }
 91             });
 92         }
 93     };
 94     TabBar.prototype.switchTab = function(pos){
 95         //选项卡切换函数 参数:pos,当前Hover的子栏序号,从0开始
 96         if( pos !== this.showNum ){
 97             this.hd[this.showNum].className = "";
 98             this.hd[pos].className=this.selectClass;
 99             this.hide();
100             this.showNum = pos;
101             this.show();
102         }
103     };
104     //Tab实例化
105     var LeeTab =new TabBar("tab");

 

  demo地址:Tab切换演示

 

  恩,就是这样。