網頁中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就完成了！