<s id="ux55u"><sub id="ux55u"></sub></s><thead id="ux55u"><legend id="ux55u"><sup id="ux55u"></sup></legend></thead>

    1. <strike id="ux55u"><u id="ux55u"><xmp id="ux55u"><dd id="ux55u"></dd>

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

      2017-01-11 11:25:00
      GavinHsueh
      原創
      4310

      對于自定義內容的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>
      CSS代碼:



      #block283,#block242{
          display:none;
          border-top:0px;
      }
      #block1{
          border-top:0px;
      }
      #blockID .btn-group button{
          width:126px;
      }
      
      上面的block1、283、242是下面三個區塊的ID,這個大家根據自己創建的區塊具體ID而定。


      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");
          });
      });
      對于沒有代碼基礎的童鞋,要注意區塊ID的調整和按鈕ID選擇器的對應。


      聯系我們

      聯系人:ZSITE交流群

      電話/微信:

      Email:

      QQ:

      地址:青島市黃島區井岡山路157號中南金石國際廣場A座3205室

      无遮挡H肉动漫视频在线观看
        <s id="ux55u"><sub id="ux55u"></sub></s><thead id="ux55u"><legend id="ux55u"><sup id="ux55u"></sup></legend></thead>

      1. <strike id="ux55u"><u id="ux55u"><xmp id="ux55u"><dd id="ux55u"></dd>