jquery模块化 （简单的选项卡）

简单的选项卡，利用index()与eq()的对应

<div>
    <ul class="tab">
        <li class="select">页面一</li>
        <li>页面二</li>
        <li>页面三</li>
        <li>页面四</li>
    </ul>
    <div class="connect">
        <div class="contain" style="display: block">内容一</div>
        <div class="contain">内容二</div>
        <div class="contain">内容三</div>
        <div class="contain">内容四</div>
    </div>
</div>

<script>
    $(".tab li").click(function(){
        var num=$(this).index();
        $(this).siblings().removeClass("select");
        $(this).addClass("select");
        $(".contain").eq(num).siblings().hide();
        $(".contain").eq(num).show()
    })
</script>

<style>
    .tab{
        width:280px;
        height:40px;
        margin:100px auto;
        padding: 0;
        list-style:none;
    }
    .select{
        background: #e6e6e8;

    }
    .tab>li{
        float:left;
        display:inline-block;
        width:68px;
        height:40px;
        text-align: center;
        line-height:40px;
        border:1px solid #333333;
        cursor:pointer;
    }
    .connect{
        width:100px;
        margin: 0 auto;
    }
    .contain{
        display:none;
    }
</style>