jQueryを使ってシンプルにタブ切替を実装する方法

2017/07/29
  • JavaScript
jQueryを使ってシンプルにタブ切替を実装する方法

今回はシンプルにタブ切替を実装する方法をご説明したいと思います。

実装方法

HTML

<div class="tab-block">
  <ul class="tab-list">
    <li data-tabIndex="1">タブ1</li>
    <li data-tabIndex="2">タブ2</li>
    <li data-tabIndex="3">タブ3</li>
  </ul>
  <div class="tab-area current" data-tabIndex="1">
    タブ1の内容
  </div>
  <div class="tab-area" data-tabIndex="2">
    タブ2の内容
  </div>
  <div class="tab-area" data-tabIndex="3">
    タブ3の内容
  </div>
</div>

JavaScript(jQuery)

$(document).ready(function(){
  $('.tab-list li').on('click',function(){
    var tabIndex = $(this).attr('data-tabIndex');
    $('.tab-area').removeClass('current');
    $('.tab-area[data-tabIndex="'+ tabIndex +'"]').addClass('current');
  });
});

css

.tab-area{
  display: none;
}

.tab-area.current{
  display: block;
}