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

フロントエンド | 2017.07.29

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

実装方法

HTML

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

</ul>

タブ１の内容

</div>

タブ２の内容

</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');
  });
});

$(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;
}

.tab-area{

display: none;

}

.tab-area.current{

display: block;

}