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

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

 

go site   核心js部分代码如下:

follow 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切换演示

 

http://www.careilaclama.com/thesis-editing-services-malaysia/   恩,就是这样。