jquery 選項卡切換

<script src="js/jquery.js"></script>

<style>

.div{width:60px;height:30px;float:left;cursor:pointer;background:lightgreen;line-height:30px;}

.tab_box , .tab_box>div{width:180px;height:300px;border:1px solid lightblue;}

</style>

<div>

<div class="tab_menu">

<div class="div">菜單一</div>

<div class="div">菜單二</div>

<div class="div">菜單三</div>

</div>

<div class="tab_box">

<div>1111111111</div>

<div style="display:none;">22222222</div>

<div style="display:none;">33333333</div>

</div>

</div>

<script>

$('.tab_menu').children().click(function () {

var id = $(this).index(); //當前操作的元素索引值

$('.tab_box').children().eq(id).show().siblings().hide(); //當前顯示，其他的隱藏。

});

</script>