简单的JQ选项卡插件

时间:2014-03-31  发布人:SHX  浏览次数:5360  评论: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 实例

源码下载 

选项卡.zip


返回

上一篇:回首毕业季,青春用来怀念下一篇:愚人节!VBS整人代码

我要评论

    loading
 

关闭

loading

回顶部