读书人

jquery插件学习之选项卡 生手求建议

发布时间: 2014-01-14 23:14:00 作者: rapoo

jquery插件学习之选项卡 新手求建议


请大家给点意见。。。jquery插件学习之选项卡  生手求建议

多多支持。。。jquery插件学习之选项卡  生手求建议

下载地址:基于jquery的选项卡插件

使用方法:
html结构:


<div id="div" class="simpleTab">
<div class="title">
<ul>
<li id="1">Tab1</li>
<li id="2">Tab2</li>
<li id="3">Tab3</li>
<li id="4">Tab4</li>
</ul>
</div>
<div class="content">
<div>
<p>Tab1</p>
<p>This is a simple tab.</p>
<p>This is the first tab.</p>
<ul>
<li>tab1</li>
<li>the first tab.</li>
<li>the 1st tab.</li>
</ul>
</div>
<div>
<p>Tab2</p>
<p>I'm the second tab.</p>
</div>
<div>
<p>Tab3</p>
<p>Hello! I'm the 3rd.</p>
</div>
<div>
<p>Tab4</p>
<p>oh! I'm the last.</p>
</div>
</div>
</div>


引用文件:

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<link href="simpleTab.css" rel="stylesheet" />
<script src="jquery.simpleTab.js"></script>


调用方法:

$(document).ready(function() {
$("#div").simpleTab({
//sid: 3, //设置默认选中项
//width:500, //设置选项卡宽度
});
})


默认选中项也可以在html结构中指定(只需给相应的li加上class="selected"):

<div class="title">
<ul>
<li id="1">Tab1</li>
<li id="2">Tab2</li>
<li id="3" class="selected">Tab3</li>


<li id="4">Tab4</li>
</ul>
</div>



不错不错。多做几套样式,弄成个自定义标签就更好了。
[解决办法]
/uploadfile/jiaocheng/2014/011348/201401132348423542.gif

读书人网 >JavaScript

热点推荐