tab-jQuery

by interlife

HTML

<div class="tab_wrap">
  <ul id="js_tab_nav" class="tab_nav">
    <li><a class="tab_item active">TAB1</a></li>
    <li><a class="tab_item ">TAB2</a></li>
    <li><a class="tab_item ">TAB3</a></li>
  </ul>
  <ul class="tab_content tab_content_1">
    <li class="tab_item active">TAB1の中身です</li>
    <li class="tab_item">TAB2の中身です</li>
    <li class="tab_item">TAB3の中身です<br>TAB3の中身です<br>TAB3の中身です</li>
  </ul>
</div>

SCSS

.tab_wrap {
  width: 50%;
}

//初期背亭
.tab_nav {
  display: flex;
  li {
    width: 33.3333%;
  }
  .tab_item {
    padding: .5em 1em;
    display: block;
    background: rgba(#000, .5);
    color: #fff;
    text-align: center;
    cursor: pointer;
  }
  .active {
    background: rgba(#000, .7);
  }
}

.tab_content {
  position: relative;
  background: rgba(#ccf, .5);
  li {
    padding: 2em 1em;
    display: none;
  }
  .active {
    display: block;
  }
}

JavaScript

$('#js_tab_nav .tab_item').on('click', function() {
  var tab_num = $(this).parent().index() + 1;
  $('.tab_item').removeClass("active");
  $(this).add('.tab_content .tab_item:nth-child('+tab_num+')').addClass("active");
});