一个Tab切换类,求指导

不久之前做一个项目时,我发现了一件非常蛋疼的事:一个页面上有几个Tab切换效果,最多的时候会有4个,(类似于网易首页),但我对批量重用函数实在是没经验,从没写过,于是我的解决办法是复制一个tab函数,如果有4个就得复制4次,但这几个函数功能是完全相同的.这让我相当不满意,因为这本来是可以避免的事,正常情况下应该是写一个函数,然后在有第2个需要调用的时候

?

var t=new Tabs($('tab1'));

一下就行了.

这几天有幸来到了博客园,看到了很多高手的文章,所以琢磨着自己写一个可以重用的Tab类.但在后期碰到了百思不得其解的问题,特来求指导.先给出代码:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81

var $=function(id){     return (typeof id == "Object") ? id : document.getElementById(id); }; var $$=function(tag,elm){     return elm.getElementsByTagName(tag); }; var $C=function(cn,tag,elm){     if(!tag) tag='*';     var ts = $$(tag,elm);     var classArr = [];     var filter = new RegExp("(^|\\s)"+cn+"(\\s|$)");     for(var i=0,l=ts.length;i<l;i++){         if(filter.test(ts[i].className)){             classArr.push(ts[i]);         }     }     return classArr; } var cutover=function(arr,cur,c1,c0){     for(var i=0,l=arr.length;i<l;i++){         arr[i].className = (i ==cur) ? c1 : c0;     } } var addEvent = function (elm, evType, fn, useCapture) {       if (elm.addEventListener) {         elm.addEventListener(evType, fn, useCapture);//DOM2.0         return true;       }       else {         var r = elm.attachEvent('on' + evType, fn);//IE5+         return r;       } } var Tabs = function (elm){     //用传入的选项代替默认选项     for(var r in arguments[1]){         this.items[r] = arguments[1][r];     }     //alert(this.items.elm.innerHTML);     this.tabhd = $C(this.items.cnhd,this.items.hdtag,elm)[0];     this.tabtag = this.tabhd.children;     this.tabbd = $C(this.items.cnbd,this.items.bdtag,elm)[0];     this.tabcon = this.tabbd.children;     if(this.tabtag.length != this.tabcon.length) {         alert('Tab标签个数与内容个数不匹配');         return true;     }                 //添加切换事件     this.ini(this); }   //修改对象的原型prototype,将函数加在里面,可以实现N个对象都共用一个方法,避免资源浪费 Tabs.prototype = {     items:{//默认选项         hdtag:'DIV',         cnhd:'tabhd',         cntag:'cur',         cntagno:'',         bdtag:'DIV',         cnbd:'tabbd',         bdcur:'cur',         bdno:'no'//最后一个元素后的,一定要去掉,不然IE会报错     },     ini:function(o){         for(var i=0,l=o.tabtag.length;i<l;i++){                           /**/             o.tabtag[i].go = i;             o.tabtag[i].onmouseover = function(){                 cutover(o.tabtag,this.go,o.items.cntag,o.items.cntagno);                 cutover(o.tabcon,this.go,o.items.bdcur,o.items.bdno);             }                       }     },     run:function(t){         this.time = t;     } };

本来刚开始一切正常,但在加切换事件时(代码中的ini函数),在tabtag[i].onmouseover上的function内无法访问到this.tabtag等对象,提示this.tabtag为undefined.原因估计是因为此时的this被指向了onmouseover本身,而不是本来的Tabs了.

我也试过几种解决办法,比如把this.tabtag之类的重定义为var tabtag形式的,但这样一来所有prototype内的函数都不能访问tabtag了,比上面的情况更郁闷.

所以只有把ini设为带参数的函数,然后在调用的时候把Tabs当成this传过去,就成了现在这样子.但感觉很别扭,肯定有更好的解决办法的.我还是对照着cloudgamer大人的一个例子写的,但奇怪的他的例子能行我的就不行,小弟表示真的非常困惑.

现在的情况是,这函数的确可用,而且可重用,但就是有一个别扭的ini函数在里面,非常不爽

求路过看过的高手指点小弟两招吧,怎么才能让Tabs里的所有this不论层级都指向Tabs本身呢?我以上的代码有什么不对之处呢?