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