jQuery でタブ切り替えを実装

Category
Published
Updated
<div class="tab__wrap">
  <div class="tab__btn-list">
    <div class="tab__btn active">tab A</div>
    <div class="tab__btn">tab B</div>
    <div class="tab__btn">tab C</div>
  </div>

  <div class="tab__content-list">
    <div class="tab__content active">
      <p>content A</p>
    </div>
    <div class="tab__content">
      <p>content B</p>
    </div>
    <div class="tab__content">
      <p>content C</p>
    </div>
  </div>
</div>
$('.tab__btn').click(function() {
    var index = $('.tab__btn').index(this);
    $('.tab__btn, .tab__content').removeClass('active');
    $(this).addClass('active');
    $('.tab__content').eq(index).addClass('active');
});
.tab {
    &__wrap {
        margin: 30px auto;
    }
    &__btn-list {
        display: flex;
        flex-wrap: wrap;
    }
    &__btn {
        background: #eee;
        cursor: pointer;
        padding: 8px 0;
        text-align: center;
        transition: all 0.2s ease 0s;
        width: 180px;

        &.active {
            background: #aaa;
        }
    }
    &__content {
        display: none;

        &.active {
            display: block;
        }
    }
}