JS實現系統模塊的TAB選項卡

對于自定義內容的tab選項卡區塊，大家可以直接到 蟬知官網的特效板塊中搜索相關的特效導入，本文是向大家介紹如何將蟬知系統里的內容板塊組成tab選項卡，這里我沒有用php+MYSQL調用數據，而是使用JS控制系統提供的內容區塊，以達到我們想要的效果，比如下圖所示的效果，是將最新文章、最新帖子和自定義區塊組成為tab選項卡。

問題：上圖所示的TAB選項卡如何實現的呢？

思路：我們可以用4個區塊來實現這個效果，頂部選項卡按鈕，蟬知動態，熱門問題和交流互動。起初區塊的布局如下：

我們可以用CSS和JS配合按鈕的點擊，來控制下面三個區塊的顯隱狀態，以達到我們想要的效果。即當點擊某個TAB按鈕時，顯示其對應的區塊而隱藏另外兩個區塊。

操作：

把4個區塊編輯好，系統區塊這里我就不闡述了，給大家列一下頂部自定義的按鈕區塊的代碼：

HTML代碼：

<div class="btn-group">
  <button type="button" class="btn btn-primary" id="dongtai">蟬知動態</button>
  <button type="button" class="btn btn-success" id="wenti">熱門問題</button></button>
  <button type="button" class="btn btn-info" id="hudong">交流互動</button>
</div>

#block283,#block242{
    display:none;
    border-top:0px;
}
#block1{
    border-top:0px;
}
#blockID .btn-group button{
    width:126px;
}

JS代碼：

$(function(){
    $("#dongtai").click(function(){
        $("#block283,#block242").css("display","none");
        $("#block1").css("display","block");
    });
    
    $("#wenti").click(function(){
        $("#block283").css("display","block");
        $("#block1,#block242").css("display","none");
    });
    
    $("#hudong").click(function(){
        $("#block283,#block1").css("display","none");
        $("#block242").css("display","block");
    });
});