Tab切换应该不依赖于HTML结构，能给设计人员和前端开发最大的灵活性。原理：一个tab对象分为控制部分(trigger)，内容部分(sheet)。当trigger被触发时，显示对应的sheet。 以前大树写过一个TabControl的代码，经过两年的使用依旧很考谱，说明当初这个思路还是比较符合实际需求的。我改成了基于YUI的版本，可能看起来更清晰一些。先访问测试页面查看效果，完整javascript代码在这里。 注意：改成实际代码时，请将Tab类放在某个命名空间下，不要直接暴露在全局空间中。 1：使用 以下是常用的html结构，但不限于此。 复制代码 代码如下: <ul id="t"> <li id="t1">t1</li> <li id="t2">t2</li> <li id="t3">t3</li> </ul> <div id="s"> <div id="s1">s1</div> <div id="s2">s2</div> <div id="s3">s3</div> </div> 对应的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自定义事件扩展，也可以在原代码基础上添加更多的自定义事件。

　　推荐阅读

　　JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结

1.兼容firefox的 outerHTML，FF中没有outerHtml的方法。 复制代码 代码如下: if (window.HTMLElement) { HTMLElement.prototype.__defineSetter__("outerHTML",function(sHTML) { var r=this.ownerDocument.create>>>详细阅读

本文标题：YUI的Tab切换实现代码

地址：http://www.17bianji.com/kaifa2/JS/26612.html

 1/2    1