用js控制选项卡的隐藏与显示

通过使用ul和div来，借助于jquery来实现选项卡的显示与隐藏

<form action="" method="post">
<div>
<ul>
<li><a id="atab1" class="atab">基基基基</a></li>
<li><a id="atab2" class="atab">本本本本</a></li>
<li><a id="atab3" class="atab">信信信信</a></li>
<li><a id="atab4" class="atab">息息息息</a></li>
<li><a id="atab5" class="atab">哈哈哈哈</a></li>
</ul>
</div>

<div >
<div class="tab" id="tab1" >

</div>
<!-- End #tab1 -->
<div class="tab" id="tab2" >

</div>
<!-- End #tab2 -->
<div class="tab" id="tab3" >

</div>
<!-- End #tab3 -->
<div class="tab" id="tab4" >

</div>
<!-- End #tab4 -->
<div class="tab" id="tab5" >

</div>
<!-- End #tab5 -->
</div>
</form>

<script type="text/javascript">
$(document).ready(function (e) {
$('.tab').each(function (e) {
if (e == 0)
$(this).show();//首次加载的时候默认显示第一个
else
$(this).hide();
});
})
//给每一个atab绑定单击事件
$('.atab').bind('click', function () {
$('.tab').hide();//隐藏所有内容
var attr = $(this).attr('id');
var id = '#' + attr.substring(1, attr.length);
$(id).show();//显示当前选中项
});
</script>

转载于:https://www.cnblogs.com/itboy-2009/p/4248236.html