使用说明 : 实例1:

var ceshi1 = new Ztabs({

　　ChannelId : 'ChannelMenu', //通道按钮ID

　　ChannelTag : 'li', //通道按钮列表标签

　　PreId : 'myTab', //选项卡ID前缀

　　sc : 'current', //选中样式

　　nsc : 'normal' //未选中样式

})
<li onmouseover="ceshi1.change(this,0);" id="t_0"><a href="">小型企业解决方案</a></li> onmouseover="ceshi1.change(this,0);"
参数this对应的是li这个标签,同时选中时样式会添加在LI标签里
如果你想在A标签里加样式可这样设置 <li><a href="" onmouseover="ceshi1.change(this,0);">小型企业解决方案</a></li> 或者<li onmouseover="ceshi1.change('t_0',0);" ><a href="" id="t_0">小型企业解决方案</a></li>
参数 0 对应ID为myTab0对象( PreId : 'myTab', //选项卡ID前缀)
要用程序激活指定的tab，只需要：ceshi1.change('t_1',1); //其中ceshi1是实例名，t_1为通道列表对应ID ,后面的1是从0开始的序号，这里有一个例子： 点这里激活第一个TAB的第二个 点这里激活第一个TAB的第三个


DEMO1:

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

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

DEMO3:

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

DEMO4:
结构比较简单，已经封装,本作品为 本站 原创，其中样式借用了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'              //未选中样式
})