【jQuery】タブの作成方法

完成形

• SCSSを使用
• jQueryを使用

See the Pen RwpJKyX by c-koch0514 (@c-koch0514) on CodePen.

HTML

html

<!-----------------------        タブ         ------------------------->
<div id="tab" class="group">
  <ul class="tab-group">
    <li class="tab is-active">Tab-A</li>
    <li class="tab">Tab-B</li>
    <li class="tab">Tab-C</li>
  </ul>

  <!--タブを切り替えて表示するコンテンツ-->
  <div class="panel-group">
    <div class="panel is-show">
      Content-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-A
    </div>
    <div class="panel">
      Content-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-B
    </div>
    <div class="panel">
      Content-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-C
    </div>
  </div>
</div>
<!-----------------------    end of タブ      ------------------------->

SCSS

scss

/***********************************************************************/
/**********                タブの設定                       *************/
/***********************************************************************/
.group {
  .tab-group,
  .panel-group {
    display: flex;
    width: 350px;
    margin: 0 auto;

    .tab {
      width: calc(350px / 3);
      background-color: pink;
      text-align: center;
      border: 1px solid #000;
      cursor: pointer;
    }
    .is-active {
      background-color: red;
    }

    .panel {
      width: 100%;
      background-color: yellow;
      border: 1px solid #000;
      padding: 10px 20px;
      display: none;
    }

    .is-show {
      display: block;
    }
  }
}

/*********************  ena of タブ    **********************************/
/***********************************************************************/

jQuery

jQuery

$(function(){  

  /*****************       タブ       **********************/
  $('.tab').click(function(){
    // クリックした要素の先祖要素の中で、classの値がgroupの要素を取得
    const group = $(this).parents('.group'); 
    group.find('.is-active').removeClass('is-active');
    $(this).addClass('is-active');
    group.find('.is-show').removeClass('is-show');
    // クリックしたタブからインデックス番号を取得
    var index = $(this).index();
    // クリックしたタブと同じインデックス番号をもつコンテンツを表示
    group.find(".panel").eq(index).addClass('is-show');
    });
  /*********************************************************/

});

同じHTMLに複数タブが存在するとき

HTMLで#tab以外のidを持ち、.groupをもったタブを作ればいい

html

<!--------------------------１つ目のタブ--------------------------------->
<div id="tab" class="group">
  <ul class="tab-group">
    <li class="tab is-active">Tab-A</li>
    <li class="tab">Tab-B</li>
    <li class="tab">Tab-C</li>
  </ul>

  <!--タブを切り替えて表示するコンテンツ-->
  <div class="panel-group">
    <div class="panel is-show">
      Content-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-A
    </div>
    <div class="panel">
      Content-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-B
    </div>
    <div class="panel">
      Content-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-C
    </div>
  </div>
</div>

<!--------------------------２つ目のタブ--------------------------------->
<div class="group">
  <ul class="tab-group">
    <li class="tab is-active">Tab-A</li>
    <li class="tab">Tab-B</li>
    <li class="tab">Tab-C</li>
  </ul>

  <!--タブを切り替えて表示するコンテンツ-->
  <div class="panel-group">
    <div class="panel is-show">
      Content-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-A
    </div>
    <div class="panel">
      Content-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-B
    </div>
    <div class="panel">
      Content-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-C
    </div>
  </div>
</div>