【jQuery】タブの作成方法

#完成形
* SCSSを使用
* jQueryを使用

<p class="codepen" data-height="376" data-theme-id="dark" data-default-tab="js,result" data-user="c-koch0514" data-slug-hash="RwpJKyX" style="height: 376px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="RwpJKyX">
  <span>See the Pen <a href="https://codepen.io/c-koch0514/pen/RwpJKyX">
  RwpJKyX</a> by c-koch0514 (<a href="https://codepen.io/c-koch0514">@c-koch0514</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#HTML
```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: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
```js: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: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>
```