Tab栏切换

网页中Tab切换应用场景很多，例如：大部分导航栏都使用。常见的切换有横向切换和纵向切换，其实原理都一样，应用显示show()和隐藏hide()，先隐藏后展开。

html代码

<div class="mainContainer">
    <div class="navContent">
        <a class="book" href="#">左右微刊</a>
        <a class="box" href="#">联系我们</a>
        <a class="box01" href="#">左右的文</a>
        <a class="contact" href="#">左右福利</a>
    </div>

    <div class="container">
        <div class="firstInfo">
            <div>
                <P>左右微刊</P> 
            </div>
        </div>
        <div class="secondInfo">
            <div>
                <P>联系我们</P>
            </div>
        </div>
        <div class="thirdInfo">
            <div>
                <P>左右的文</P>
            </div>
        </div>
        <div class="lastInfo">
            <div>
                <P>左右福利</P>
            </div>
        </div>
    </div>
</div>

JQuery代码

<script>
    $(function(){
        $(".container>div").hide();//隐藏所有div
        $(".container>div:eq(0)").show();//默认第一个展开 

        $(".navContent a").click(function(){
            var n = $(".navContent a").index(this);//拿到索引值
            $(".container>div").hide();
            $(".container>div:eq("+n+")").show();  
        })
    })
</script>

css代码

<style>
    * {
        margin: 0;
    }
    img, a {
        display: block;
        text-decoration: none;
    }
    p, span {
        font-size: 14px;
        font-family: '微软雅黑';
        color: #4d4d4d;
    }
    body {
        background-image: url(images/bg.png);
        background-repeat: no-repeat;
    }
    .mainContainer {
        width: 1200px;
        margin: 150px auto;
        overflow: hidden;
        background-color: #FFF;
    }
    .navContent {
        float: left;
    }
    .book,.box,.box01,.contact{
        padding-left: 83px;
        padding-right: 44px;
        display: block;
    }

    .book,.firstInfo {
        background-color: #78bcaf;
    }
    .box,.secondInfo{
        background-color: #adca7a;
    }
    .box01,.thirdInfo {
        background-color: #67affb;
    }
    .contact,.lastInfo {
        background-color: #f87678;
    }
    .navContent a {
        color: #FFF;
        font-size: 16px;
        font-family: '微软雅黑';
        text-align: center;
        line-height: 120px;
    }
    .firstInfo,.secondInfo,.thirdInfo,.lastInfo {
        width: 1000px;
        height: 480px;
        line-height: 480px;
        text-align: center;
    }
    .firstInfo p,.secondInfo p, .thirdInfo p,.lastInfo p{
        font-size: 50px;
    }
</style>

好了，一个简单的Tab切换demo就完成了！