【jQuery】コンテンツの切り替えができるタブを作成しよう

2021.03.18　Posted by Coding_team

Webプログラミング

ホームページを見ていると、同ページ内でコンテンツを切り替え表示できる「タブ」を見たことがあると思います。カテゴリ分けされたお知らせ一覧などを思い浮かべると分かりやすいかもしれません。

今回は、jQueryを使ったタブの実装方法をご紹介します。

1 デモ
2 実装方法
3 まとめ

デモ

まずはデモをご覧ください。
ボタンをクリックすると、タブが切り替わるのが分かると思います。

SAMPLE

タブ1

タブ2

タブ3

タブ1

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト1

タブ2

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト2

タブ3

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト3

実装方法

HTML

<div class="tab_box">
  <div class="btn_area">
    <p class="tab_btn active">タブ1</p>
    <p class="tab_btn">タブ2</p>
    <p class="tab_btn">タブ3</p>
  </div>
  <div class="panel_area">
    <div class="tab_panel active">
      <p>タブ11111</p>
      <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト11111</p>
    </div>
    <div class="tab_panel">
      <p>タブ22222</p>
      <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト22222</p>
    </div>
    <div class="tab_panel">
      <p>タブ333333</p>
      <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト33333</p>
    </div>
  </div>
</div>

</div>

<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト11111</p>

</div>

<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト22222</p>

</div>

<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト33333</p>

</div>

ボタン部分をbtn_area、パネル部分をpanel_areaとしています。
最初に表示しておきたいタブのボタン部分、パネル部分それぞれにactiveクラスを付けておきます。
今回はタブ1をactiveにしています。

CSS

/*タブ実装*/
.tab_box .btn_area {
  margin:0 10px;
  display: -webkit-box;
  display: flex;
}

.tab_box .tab_btn {
  width: 188px;
  padding: 8px 0;
  color: #333;
  background: #f5f7f8;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease 0s;
}

.tab_box .tab_btn + .tab_btn {
  margin-left: 8px;
}

.tab_box .tab_btn:hover {
  background-color: #dce1e4;
}

.tab_box .tab_btn.active {
    background:#07539f;
    color:#fff;
}

.tab_box .panel_area {
    border: solid 1px #e3ebf3;
    padding: 20px;
}

.tab_box .tab_panel {
    display:none;
}

.tab_box .tab_panel.active {
    display:block;
}

/*タブ実装*/

.tab_box .btn_area {

margin:0 10px;

display: -webkit-box;

display: flex;

}

.tab_box .tab_btn {

width: 188px;

padding: 8px 0;

color: #333;

background: #f5f7f8;

text-align: center;

cursor: pointer;

transition: all 0.2s ease 0s;

}

.tab_box .tab_btn + .tab_btn {

margin-left: 8px;

}

.tab_box .tab_btn:hover {

background-color: #dce1e4;

}

.tab_box .tab_btn.active {

background:#07539f;

color:#fff;

}

.tab_box .panel_area {

border: solid 1px #e3ebf3;

padding: 20px;

}

.tab_box .tab_panel {

display:none;

}

.tab_box .tab_panel.active {

display:block;

}

ボタン部分はflexboxで横並びにしました。
ボタンが2列になる場合はflex-wrap: wrap;を付けて折り返すようにすると良いでしょう。

パネル部分はactiveクラスが付いたパネルをdisplay:blockで表示し、付いていないパネルはdisplay:noneで非表示にしておくのがポイントです。

jQuery

$('.tab_box .tab_btn').click(function() {
  var index = $('.tab_box .tab_btn').index(this);
  $('.tab_box .tab_btn, .tab_box .tab_panel').removeClass('active');
  $(this).addClass('active');
  $('.tab_box .tab_panel').eq(index).addClass('active');
});

$('.tab_box .tab_btn').click(function() {

var index = $('.tab_box .tab_btn').index(this);

$('.tab_box .tab_btn, .tab_box .tab_panel').removeClass('active');

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

$('.tab_box .tab_panel').eq(index).addClass('active');

});

ボタンをクリックした時のイベントを書きましょう。
$(‘.btn_area .tab_btn’).index(this)は、ページ全体の.btn_area .tab_btnの中でクリックしたボタンが何番目にあたるのか、その数を返します。
インデックスは0始まりなので、タブ1のボタンをクリックした場合は0が返ってきます。

今の時点でボタン部分とパネル部分に付いているactiveは一旦削除しましょう。
その後、クリックしたボタンのクラスにactiveを追加します。
パネルはeq(index)で要素の位置を指定できるので、先程取得したボタンのインデックスを使ってactiveクラスを追加します。