首页 > 技术资源分享 > jQuery源码分享 > tab折页标签的通用性JS代码(jQuery)
2012
11-16

tab折页标签的通用性JS代码(jQuery)

JS部分部分:
$(document).ready(function () {
$(‘#sct1 a’).click(function () {
var j = $(‘#sct1 a’).index($(this)[0]);
$(‘#sct1 a’).eq(j).addClass(‘current’).siblings().removeClass();
$(‘.sct1_div’).eq(j).show().siblings(‘.sct1_div’).hide();
return false;
});
});
html部分:

<div id=”sct1″>
<a href=”javascript:void(0)” class=”current”>tab1</a>
<a href=”javascript:void(0)”>tab2</a>
<a href=”javascript:void(0)”>tab3</a>
<a href=”javascript:void(0)”>tab4</a>
</div>
<div class=”sct1_div”><p>折页1的内容</p></div>
<div class=”sct1_div” style=”display:none”><p>折页2的内容</p><p>折页2的内容</p></div>
<div class=”sct1_div” style=”display:none”><p>折页3的内容</p><p>折页3的内容</p><p>折页3的内容</p></div>
<div class=”sct1_div” style=”display:none”><p>折页4的内容</p><p>折页4的内容</p><p>折页4的内容</p><p>折页4的内容</p></div>

 

样式部分:

<style type=”text/css”>
.current{font-weight:bold; background:#F00; color:#fff;}
</style>

 

jQuery引用:

<script type=”text/javascript” src=”http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js”></script>

 

实例测试:

折页1的内容

这段代码并没有写多余的应用代码,完全性的原生框架,可以应用于任意情况。并且tab按钮和显示区块可以分开,并不需要摆在一起。但是有一点一定要注意,每个tab的A标签都对应一个div的显示板块,顺序不能错乱。

最后编辑:
作者:品味人生
就是一个管理员,frontopen的管理员,嗯,介绍完毕!
捐 赠如果您觉得这篇文章有用处,请支持作者!鼓励作者写出更好更多的文章!