JQueryでタブ切り替えを実装 - masaの学習備忘録

はじめに

今回はタブをクリックして、各コンテンツの表示切り替えをさせる処理を、jQueryを利用して実装しました。

実装方法

f:id:namotasam14:20181104222409p:plain

html

まずは今回はタブを３つ用意します。それらのタブに関連したコンテンツも同じく3つ用意しますが、初期表示されるものは1つだけにします。
下記がhtmlのコードになります。
※記事内容に関係のある箇所だけを抜粋しています。

<body>
  <div class="content-header">
    <div class="header-tab">
      タブ1
    </div>
    <div class="header-tab">
      タブ2
    </div>
    <div class="header-tab">
      タブ3
    </div>
  </div>
  <div class="content-body">
    <div class="body-item">
      これはタブ１のコンテンツです。
    </div>
    <div class="body-item">
      これはタブ２のコンテンツです。
    </div>
    <div class="body-item">
      これはタブ３のコンテンツです。
    </div>
  </div>

CSS

続いてCSSのコードは下記になります。
※こちらはほとんど体裁を整えるためのものですが、カレント表示を実装するためのクラス「is-active」は基本的に必須ではないかと思います。他のクラスはお好きなように変更加えてください。

.content-header {
	display: flex;
	border: 1px solid #ec5d01;
	justify-content: space-between;
}
.header-tab {
	width: 33.33%;
	padding: 25px 0;
	text-align: center;
	background-color: #f1d06b;
	border-right: 1px solid #ec5d01;
}
.header-tab:last-child {
	border-right: none;
}
.is-active {
	background-color: #f16b6b;
	color: #fff;
}
.content-body {
	font-size: 20px;
	font-weight: bold;
}
.body-item {
	text-align: center;
	margin-top: 100px;
}

jQuery

今回の内容の主役、jQueryのコードなります。

/* 初期表示 */
$(function() {
  //メニュー１のコンテンツのみ表示
  $('.body-item').hide();
  $('.body-item').eq(0).show();
  $('.header-tab').eq(0).addClass('is-active');

  $('.header-tab').each(function() {
    $(this).on('click', function() {
      var tabIndex = $('.header-tab').index(this);
      $('.header-tab').removeClass('is-active');
      $(this).addClass('is-active');
      $('.body-item').hide();
      $('.body-item').eq(tabIndex).show();
    });
  });
});

解説

$('.body-item').hide();
まず、各コンテンツを非表示にします。

$('.body-item').eq(0).show();
最初から数えて、順番が1つ目のコンテンツのみを表示させます。
※eq()メソッドでは、0(ゼロ)番目の要素のみに処理を行わせています。

$('.header-tab').eq(0).addClass('is-active');
そして、0(ゼロ)番目のタブに「is-active」クラスを付与することで、カレント表示になります。

var tabIndex = $('.header-tab').index(this);
クリックされたメニュータブのインデックスを取得し、変数に代入します。

$('.header-tab').removeClass('is-active');
すべてのタブから「is-active」クラスを外します。

$(this).addClass('is-active');
クリックされたタブのみに「is-active」クラスを付与し、カレント表示の状態にします。

$('.body-item').hide();
すべてのコンテンツを非表示します。

$('.body-item').eq(tabIndex).show();
先ほどの変数「tabIndex」を使うことで、クリックされたタブと同じ順番のコンテンツのみが表示されます。

最後に

今回はシンプルな実装方法にはなりましたが、カレント表示機能もあるので今後いろいろな場面で利用できる内容ではないかと思います。今回の内容をベースに、さらにcssなどで動きを加えたものを作成し、よりよい、デザイン性があるものを実務の中に取り入れていけたらと思います。