jQuery选项卡切换原理

根据display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失。

选项卡的原理是将所有的内容都写出来，先通过display:none将一开始看不到的内容隐藏，然后通过show()和hide()实现切换选项卡。

<div>
    <div class="tab_menu">
        <div class="div">1</div>
        <div class="div">2</div>
        <div class="div">3</div>
    </div>
    <div class="tab_content">
        <div>hello world</div>
        <div style="display:none">welcome to my world</div>
        <div style="display:none;">this is hell</div>
    </div>
</div>
<script type="text/javascript" src="style/js/jquery-2.0.0.min.js" ></script>
<script>
    $('.tab_menu').children().on('click',function(){
        var index = $(this).index();   //当前操作的元素索引值
        $('.tab_content').children().eq(index).show().siblings().hide();   //当前显示，其他的隐藏。
    });
</script>