使用jQuery實現Tab頁效果

<div id="tabContainer" style="float:left;">
    <div id="tab_1" style="float:left;">Tab1</div>
    <div id="tab_2" style="float:left;">Tab2</div>
</div>
<div style="clear:both;"></div>
<div id="tabContentContainer">
    <div id="tab_1_con">Tab1的內容</div>
    <div id="tab_2_con">Tab2的內容</div>

</div>

<stype  type="text/css">

.other, .current {
    width:50px;
    margin:1px 1px;
}
.current {
    background-color:#663300;
}
.hidden {
    display:none;
}
.show {
    display:block;
}

<script type="text/javascript">
$(function() {

    $('#tabContentContainer > div').attr('class', 'hidden');   // 全部Tab內容不顯示
    $('#tabContentContainer > div:first').attr({'class':'show'});  // 顯示第一個Tab內容
    
    $('#tabContainer > div:first').attr('class', 'current');             // 設置第一個Tab爲current
    $('#tabContainer > div').each(function(n) {                        // 遍歷所有子div控件
        $(this).click(function() {
            $('#tabContainer > div').attr({'class':'other'});             // 所有Tab都設置爲other
            $(this).attr('class','current');                                        // 當前Tab設置爲current
            $('#tabContentContainer > div').each(function(n) {    // 遍歷設置所有的Tab內容不顯示
                $(this).attr('class','hidden');
            });
            $('#'+this.id+'_con').attr('class','show');                      // 顯示當前的Tab對應的內容
        });
    })
})
</script>