所属分类:网页特效-选项卡/滑动门
使用方法:
引入必要的JS文件和CSS样式文件
<link href='style.css' rel='stylesheet'/>
<script type="text/javascript" src="zepto.js">script>
<script type="text/javascript" src="tabslider.js">script>
HTML部分
<div id="tabSlider1" class="tabSlider">
<ul class="tabSlider-hd">
<li class="curr">标题1</li>
<li>标题2</li>
<li>标题3</li>
</ul>
<div class="tabSlider-bd">
<div class="tabSlider-wrap">
<div class="tabSlider-box curr">
<ul>
<li>text1</li>
<li><div style="background:#CF0" onClick="alert(3)">text1</div></li>
<li>text1</li>
<li>text1</li>
<li>text1</li>
<li>text1</li>
<li>text1</li>
<li>text1</li>
</ul>
</div>
<div class="tabSlider-box">
<ul>
<li>text2</li>
<li><a href="http://www.baidu.com" style="display:block; background:#C0F; color:#fff;">text2</a></li>
<li>text2</li>
<li>text2</li>
<li>text2</li>
<li>text2</li>
<li>text2</li>
<li>text2</li>
<li>text1</li>
<li><div style="background:#CF0" onClick="alert(3)">text1</div></li>
<li>text1</li>
<li>text1</li>
<li>text1</li>
<li>text1</li>
<li>text1</li>
<li>text1</li>
</ul>
</div>
<div class="tabSlider-box">
<ul>
<li>text1</li>
<li><div style="background:#CF0" onClick="alert(3)">text1</div></li>
<li>text1</li>
<li>text1</li>
<li>text1</li>
<li>text1</li>
<li>text1</li>
<li>text1</li>
<li>text3</li>
<li>text3</li>
<li>text3</li>
<li>text3</li>
<li>text3</li>
<li>text3</li>
<li>text3</li>
<li>text3</li>
</ul>
</div>
</div>
</div>
</div>
插件初始化、配置
<script type="text/javascript">
$(function(){
app.TabSlider('#tabSlider1');
});
script>
三种效果请看演示,或下载附件查看