2018.10.12

jQueryでタブ切り替えを設置（複数設置も対応）

プラグインを使用せず、jQueryでタブ切り替えを設置する場合は以下のようにすれば簡単に設置が可能。

【HTML】

<ul class="tabMenu">
  <li class="active">タブメニュー</li>
  <li>タブメニュー</li>
  <li>タブメニュー</li>
</ul>
<div class="tabContent active">
  <p>ここにコンテンツ</p>
</div>
<div class="tabContent">
  <p>ここにコンテンツ</p>
</div>
<div class="tabContent">
  <p>ここにコンテンツ</p>
</div>

<li class="active">タブメニュー</li>

<li>タブメニュー</li>

</ul>

<p>ここにコンテンツ</p>

</div>

<p>ここにコンテンツ</p>

</div>

<p>ここにコンテンツ</p>

</div>

【jQuery】

$(function() {
  $('.tabContent.active').fadeIn();
  $('.tabMenu li').click(function() {
    var num = $('.tabMenu li').index(this);
    $('.tabContent').removeClass('active').fadeOut();
    $('.tabContent').eq(num).addClass('active').fadeIn();
    $('.tabMenu li').removeClass('active');
    $(this).addClass('active');
  });
});

$(function() {

$('.tabContent.active').fadeIn();

$('.tabMenu li').click(function() {

var num = $('.tabMenu li').index(this);

$('.tabContent').removeClass('active').fadeOut();

$('.tabContent').eq(num).addClass('active').fadeIn();

$('.tabMenu li').removeClass('active');

$(this).addClass('active');

});

1ページに複数設置する場合

たまに1ページに複数設置したい場合があるが、上記の記述ではすべてのタブ切り替えが反応してしまうので、別のコードで対応する必要がある。

【jQuery】

$(function() {
  $('.tabContent').hide();
  $('.tabContent.active').show();
  $('.tabMenu li').click(function() {
    var num = $(this).parent().children('li').index(this);
    $(this).parent('.tabMenu').each(function(){
      $('li',this).removeClass('active').eq(num).addClass('active');
    });
    $(this).parents().next().find('.tabContent').removeClass('active').hide().eq(num).addClass('active').show();
  });
});

$(function() {

$('.tabContent').hide();

$('.tabContent.active').show();

$('.tabMenu li').click(function() {

var num = $(this).parent().children('li').index(this);

$(this).parent('.tabMenu').each(function(){

$('li',this).removeClass('active').eq(num).addClass('active');

});

$(this).parents().next().find('.tabContent').removeClass('active').hide().eq(num).addClass('active').show();

});