タブの作り方

2018.07.16

↓DEMOのようなタブの作り方を解説します。

  • tab1
  • tab2
  • tab3

HTML


  <div class="view_wrap">
    <ul class="tab_list">
      <li class="js-tab hover_a active" data-num="tab_01">tab1</li>
      <li class="js-tab hover_a" data-num="tab_02">tab2</li>
      <li class="js-tab hover_a" data-num="tab_03">tab3</li>
      </ul>
    </div>
  <div class="tab_content">
  <div class="tab_item tab_01">
    <div class="md_img"><img src="https://placehold.jp/ada6fc/ffffff/300x300.png?text=tab1" alt="">
      </div></div>
      <div class="tab_item tab_02">
        <div class="md_img"><img src="https://placehold.jp/ada6fc/ffffff/300x300.png?text=tab2" alt="">
        </div></div>
      <div class="tab_item tab_03">
    <div class="md_img"><img src="https://placehold.jp/ada6fc/ffffff/300x300.png?text=tab3" alt="">
  </div></div>
  </div>

HTMLは、タブ部分とタブに紐づく表示部分を分けてマークアップします。 現在表示されているタブにはactiveクラスとつけておきます。 また、タブの一つずつにカスタムデータ属性(data-)をつけておきます。jsを使うときにこれがタブを識別するものになります。

CSS

      
    .tab_list{
      letter-spacing: -0.4em;
      text-align: left;
      position:relative;
    }
    .tab_content{
      position:relative;
      height: 300px;
    }
    .js-tab{
      display: inline-block;
      letter-spacing: normal;
      vertical-align:top;
      margin-right: 5px;
      background-color: #b396e8;
      padding: 10px 20px;
    } 
    .tab_01{ 
      position:relative; 
    } 
    .tab_02{ 
      display: none; 
      position:absolute; 
      top:0; 
      left:0; 
    }
    .tab_03{ 
      display: none; 
      position:absolute; 
      top:0; 
      left:0; 
    }
    .hover_a:hover { 
      opacity: 0.8; 
      cursor: pointer; 
    } 
    .js-tab.active{ 
      background-color: #eee; 
    }
      
    

CSSのポイントは、初期表示のタブをposition:relative; にし、ほかをdisplay: none; かつ position:absolute; にするところです。 タブをクリックしたときに表示させるようにします。

JS

      
    $(function () {

      var tabBtn = $(".js-tab");
      // スイッチをクリック
      tabBtn.on("click", function () {

      // クリックした要素のカスタムデータ属性を取得
      // 取得した属性名をクラス名に変換して、そのクラス名を持つタブ領域を取得
      var tabOj = $("." + $(this).attr("data-num"));

      // 取得したタブ領域が現在開いている状態ならキャンセル
      if (tabOj.css('display') === 'block') {
      return;
      }

      // すべてのタブ領域をfadeOut()する
      $(".tab_item").css('display', 'none');

      // 取得したタブオブジェクトに対してfadeIn()する
      tabOj.fadeIn();

      // タブをアクティブの状態にする
      tabBtn.removeClass("active");
      $(this).addClass("active");
      });

    });
      
 

コメントに書いてある通りですが、クリックした要素を取得→すべてのタブ領域を消す→取得したタブオブジェクトを表示させるという流れです。