用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>

用js控制選項卡的隱藏與顯示