一个Tab切换类,求指导

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

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

一下就行了.

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

        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本身呢?我以上的代码有什么不对之处呢?

转载于:https://www.cnblogs.com/lixlib/archive/2011/03/17/tabs-class-js-lixlib.html