简单的JQ选项卡插件
时间：2014-03-31 发布人：SHX 浏览次数：8450 评论：3
在网页中，往往有很多重叠在一起，做成选项卡的内容。这里分享一个JQ插件，一段代码就可以实现选项卡的功能。
这里简单介绍下他的用法
<script type="text/javascript" src="jquery- 1.4.2.min.js"></script> <!-- 引用JQ --> <script type="text/javascript" src="ks-switch.pack.js"></script> <!-- 引用选项卡插件 -->
然后初始化
<script type="text/javascript">
/*--------------------------------------/
* (http://www.20shx.com)
* Based On JQuery 1.2.6+
* JQuery滑动切换插件 ver 1.2.0
*
* defaultIndex
- 默认选中的标签索引，从0开始
* titOnClassName
- 标签选中时的样式
* titCell
- 自定义标题标签，支持选择符
* mainCell
- 自定义标题标签，支持选择符
* delayTime
- 延迟触发时间. 当这个时间小于切换动画效果时间时, 动画将被禁用
* interTime
- 自动切换时间. 当这个时间大于0时, 标签将定时自动切换
* trigger
- 滑动触发方式. 默认为click, 可选择mouseover
* effect
- 切换动画. 默认不使用动画. 目前仅提供fade(淡出), slide(向下展开)两种
* omitLinks
- 是否忽略带链接标签，默认为否
* debug
- 调试模式. 默认关闭
/*--------------------------------------/
$(function($){
$("#list").switchTab({titCell: ".title a", mainCell: ".text ul",
trigger: "click", delayTime: 0});
});
</script>在页面中相对于的写HTML
<div id="list"> <div class="title"> <a href="javascript:void(0);">选项一</a> <a href="javascript:void(0);">选项二</a> <a href="javascript:void(0);">选项三</a> </div> <div class="text"> <ul> <li>选项<span style="color:red;">一</span>的列表</li> <li>选项<span style="color:red;">一</span>的列表</li> <li>选项<span style="color:red;">一</span>的列表</li> <li>选项<span style="color:red;">一</span>的列表</li> <li>选项<span style="color:red;">一</span>的列表</li> </ul> <ul> <li>选项<span style="color:red;">二</span>的列表</li> <li>选项<span style="color:red;">二</span>的列表</li> <li>选项<span style="color:red;">二</span>的列表</li> <li>选项<span style="color:red;">二</span>的列表</li> <li>选项<span style="color:red;">二</span>的列表</li> </ul> <ul> <li>选项<span style="color:red;">三</span>的列表</li> <li>选项<span style="color:red;">三</span>的列表</li> <li>选项<span style="color:red;">三</span>的列表</li> <li>选项<span style="color:red;">三</span>的列表</li> <li>选项<span style="color:red;">三</span>的列表</li> </ul> </div> </div>
很简单的功能，如果需要了解更多，请查看源码中的 demo.html 实例
源码下载
上一篇：回首毕业季，青春用来怀念下一篇：愚人节！VBS整人代码
