tab切换应该不依赖于html结构，能给设计人员和前端开发最大的灵活性。原理：一个tab对象分为控制部分(trigger)，内容部分(sheet)。当trigger被触发时，显示对应的sheet。
以前大树写过一个tabcontrol的代码，经过两年的使用依旧很考谱，说明当初这个思路还是比较符合实际需求的。我改成了基于yui的版本，可能看起来更清晰一些。先访问测试页面查看效果，完整javascript代码在这里。
注意：改成实际代码时，请将tab类放在某个命名空间下，不要直接暴露在全局空间中。
1：使用
以下是常用的html结构，但不限于此。
复制代码 代码如下:
t1
t2
t3
s1
s2
s3
对应的javascript代码如下，四种初始化方法都是可以的。
复制代码 代码如下:
var tab = new tab($d.get('t').getelementsbytagname('li'), $d.get('s').getelementsbytagname('div'));//1
var tab = new tab(['t1','t2', 't3'],['s1','s2', 's3']);//2
var tab = new tab(['t1','t2','t3'],['s1','s2','s3'],{ triggerevent:'mouseover',slideenabled:true});//3
var tab = new tab();//4
tab.add('t1', 's1');
tab.add('t2', 's2');
tab.add('t3', 's3');
tab.config['triggerevent'] = 'mouseover';
tab.config['slideenabled'] = true;
tab.onshow.subscribe(function(t, a){ ... });
tab.init();
2：扩展
已经实现自动切换功能(默认关闭)，另外可以通过onshow自定义事件扩展，也可以在原代码基础上添加更多的自定义事件。