var ceshi1 = new Ztabs(); 默认选项 :ChannelId : 'ChannelMenu', //通道按钮ID ChannelTag : 'li', //通道按钮标签 PreId : 'myTab', //选项卡ID前缀 sc : 'current', //选中样式 nsc : 'normal' //未选中样式

var ceshi2 = new Ztabs({ ChannelId : 'dolphinnav', ChannelTag : 'a', //通道按钮标签 PreId : 'tab', sc : 'current', //选中样式 nsc : 'normal' //未选中样式 })

var ceshi3 = new Ztabs({ ChannelId : 'menubox', ChannelTag : 'li', //通道按钮标签 PreId : 'menubot', //选项卡ID前缀 sc : 'current', //选中样式 nsc : 'normal' //未选中样式 })

结构比较简单，已经封装,本作品为本站原创，其中样式借用了jquery的ui-tab的样式

使用方法，


var ceshi4 = new Ztabs({
  ChannelId    : 'container-1',   //通道按钮ID
  ChannelTag   : 'li',            //通道按钮标签
  PreId        : 'fragment-',     //选项卡ID前缀
  sc           : 'ui-tabs-selected',       //选中样式
  nsc          : 'normal'         //未选中样式
})

兼容IE6，7，8（样式有一点问题）,FF1.5，FF3.0

程序调用后只对TAB做监控,默认选中有CSS控制,只有触发事件才会改变选中项

<li class="ui-tabs-selected" onclick="ceshi4.change(this,0);"><a href="#fragment-1"><span>One</span></a></li>
onmouseover="ceshi4.change(this,0);" 参数0对应的是id为fragment-0的对象(因为这里设置了 PreId : 'fragment-', //选项卡ID前缀fragment-) 默认
要用程序激活指定的tab，只需要：ceshi1.change('t_1',1); //其中ceshi1是实例名，后面的1是从0开始的序号，这里有一个例子：点这里激活第一个TAB的第二个


JS 写法 :
var ceshi4 = new Ztabs({
  ChannelId    : 'container-1',   //通道按钮ID
  ChannelTag   : 'li',            //通道按钮标签
  PreId        : 'fragment-',     //选项卡ID前缀
  sc           : 'ui-tabs-selected',       //选中样式
  nsc          : 'normal'         //未选中样式
})

demo 结构 :
<div id="container-1">
	<ul class="ui-tabs-nav">
		<li class="ui-tabs-selected" onclick="ceshi4.change(this,0);"><a href="#fragment-1"><span>One</span></a></li>
		<li class="" onclick="ceshi4.change(this,1);"><a href="#fragment-2"><span>Two</span></a></li>
		<li class="" onclick="ceshi4.change(this,2);"><a href="#fragment-3"><span>Three</span></a></li>
	</ul>
	<div style="display: block;" class="ui-tabs-panel ui-tabs-hide" id="fragment-0">
		<p>First tab</p>
	</div>
	<div class="ui-tabs-panel ui-tabs-hide" id="fragment-1">
		<p>Second tab</p>
	</div>
	<div class="ui-tabs-panel ui-tabs-hide" id="fragment-2">
		<p>Third tab</p>
	</div>
</div>

var ceshi4 = new Ztabs({ ChannelId : 'utbs', ChannelTag : 'li', //通道按钮标签 PreId : 'uts', //选项卡ID前缀 sc : 'ui-tabs-selected', //选中样式 nsc : 'normal' //未选中样式 })

DEMO1:

DEMO2:

DEMO3:

DEMO4: