JavaScript选项卡

点此查看效果

点此下载

通过取连接的hash值(“#”后面的)来实现tab切换，具有良好的可用性，实现结构行为相分离。

js调用方式：catTab(el,args)

参数说明：

el：目标元素，可以是单个id值/对象也可是多个id值/对象组成的数组
args：参数组{
focusClass:导航连接高亮样式，默认为"lh",
mode:鼠标事件，默认为"mouseover",
ajaxLoad:是否是ajax方式，可用值为“true”、“false”,
ajaxWrap:ajax方式时，主层对象或id,
ajaxLoading:ajax加载进行时执行的函数，第一个参数为目标层,
ajaxLoadsucc:ajax加载完成时执行的函数，第一个参数为获取的数据(responseText)，第二个参数为目标层,
ajaxLoadfail:ajax加载失败时执行的函数，第一个参数为目标层
}
普通示例：

catTab('TabDemo',{
	focusClass:'lh',
	mode:'mouseover'
});

ajax方式示例：

catTab('TabDemo_3',{
	focusClass:'lh',
	ajaxLoad:true,
	ajaxWrap:'AjaxTab',
	mode:'mouseover'
});

结构层主要在于导航栏的书写：

<ul class="tab" id="TabDemo">
	<li><a href="http://www.vfresh.org/#d1" title="">导航1</a></li>
	<li><a href="#d2" title="" class="lh">导航2</a></li>
	<li><a href="http://www.vfresh.org/" title="">导航3</a></li>
</ul>

“导航1”对应显示id值为“d1”的层(href值#后的值)
“导航3”无对应层，无切换效果
导航1和导航3在非click触发导航情况下可打开“http://www.vfresh.org/”

默认显示的tab为设置了高亮className的连接对应的层，如上例默认显示导航2对应的层“d2”
如未设置高亮className，则默认显示第一个导航连接对应的层“d1″

后期将会考虑做以下扩展，记录下：

1. 鼠标移动触发加上延迟
2. 可通过window.location.hash的值来显示对应的层
3. 优化点击显示tab的方法”showTab”
4. 可移除/添加tab