多用tab选项卡实例

一、功能介绍：

把自动切换、鼠标滑动切换、鼠标单击切换写在一个脚本里，只需要修改html中的相关参数就可以完成多种效果的切换，不需重新编写js脚本，方便实用。。。。。。。。。

一、脚本引用

需引用jquery.js和tabs_jquery.js脚本

<scripttype="text/javascript"src="xxx/jquery-1.7.2.min.js"></script>

<scripttype="text/javascript"src="xxx/tabs_jquery.js"></script>

二、html结构

<divclass=”tab_atab”>

<ulclass=”tabMenu”>

<liclass="active">选项卡一</li>

<li>选项卡二</li>

</ul>

<divclass=”tabInner”>

<divclass="tablistshow">切换内容一</div>

<divclass="tablisthide">切换内容二</div>

</div>

</div>

说明：

1、tab，tabMenu，tabInner，tablist为样式结构名称，每个选项卡必须加上，但可以没有样式。需要注意它们之间的结构关系：tab为最外层，tabMenu为切换按钮层，tabInner为需要切换的内容层，tablist为具体需要显示和隐藏的层。

2、选项卡可以通过给外层附加样式属性来控制如：<divclass=”tab_atab”>可以通过tab_a来对这个选项卡附加样式。

3、show，hide样式为显示和隐藏属性（注意在样式中的优先级一定要大于tablist）。参考写法如下：

.show{display:block;}

.hide{display:none;}

三、属性设置：

<divclass=”tab_atab”ev=”click”timer=”2000”>

<ulclass=”tabMenu”>

<liclass="active">选项卡一</li>

<li>选项卡二</li>

</ul>

<divclass=”tabInner”>

<divclass="tablistshow">切换内容一</div>

<divclass="tablisthide">切换内容二</div>

</div>

</div>

html结构说明中蓝色部分为可设置参数的属性，说明如下：

1、<divclass=”tab”>

说明：没有参数，为默认切换方式，鼠标滑到选项按钮上切换对应的内容。

2、<divclass=”tab”ev=”click”>

说明：添加ev=”click”参数，表示鼠标点击选项按钮时切换对应的内容。

3、<divclass=”tab”timer=”2000”>

说明：添加timer=”2000”，表示每2s自动切换一次。

4、<divclass=”tab”ev=”click”timer=”2000”>

说明：同时添加ev和timer参数，表示鼠标点击切换，并且每2s自动切换一次内容。

5、如加载网页时需要默认显示特定选项卡的内容，请在对应的切换按钮上添加class=’active’，并在对应的内容显示层上添加class=’show’，其他的内容显示层添加class=’hide’。

如需要默认显示第二个选项卡：

<divclass=”tab_atab”ev=”click”timer=”2000”>

<ulclass=”tabMenu”>

<li>选项卡一</li>

<liclass="active">选项卡二</li>

</ul>

<divclass=”tabInner”>

<divclass="tablisthide">切换内容一</div>

<divclass="tablistshow">切换内容二</div>

</div>

</div>

四、其它：

具体源码和实例请参考附件

本文出自 “执手兰舟” 博客，转载请与作者联系！