今回は、jQueryを使ってタブの切り替えを実装する方法について、初心者向けに解説していきます。

jQueryでタブ切り替えのイベントを実装する方法

実装サンプル

See the Pen
【jQuery】タブ切り替え by 田村翔 (@geqvzwon-the-typescripter)
on CodePen.

こちらが実装サンプルです。
上のタブをクリックすると、それぞれの詳細が表示されるという仕組みです。

こちらのサンプルの解説をしていきます。

Step1｜タブ切り替えのボタン設置

まずタブ部分のHTML＆CSSを準備します。

HTML

<ul class="tab-area">
  <li class="tab active">ドラゴンボール</li>
  <li class="tab">鬼滅の刃</li>
  <li class="tab">スパイファミリー</li>
</ul>

初期表示させるタブにのみ、「active」クラスを持たせます。
このactiveクラスを付けたり外したりすることで、タブの切り替えを行います。

CSS

.tab-area {
  display: flex;/* flexで横並び */
  border: 2px solid;
  cursor: pointer;/* カーソルポインターに */
}
.tab {
  width: calc(100%/3);/* calc関数を使用し、均等に3分割する */
  padding: 5px;
  text-align: center;/* 文字を中央に。 */
}
.tab:nth-child(n+2) {
  border-left: 2px solid;
}
.tab.active {
  background-color: #000;
  color: #fff;
}

Step2｜タブパネルの設置

次にタブパネルを設置します。
タブボタンと同じように、最初に表示させるパネルにのみactiveクラスを付与させます。

HTML

<div class="panel-area">
  <div class="panel active">
    <h2>ドラゴンボール</h2>
    <ul>
      <li>孫悟空</li>
      <li>ベジータ</li>
      <li>ピッコロ</li>
    </ul>
  </div>
  <div class="panel">
    <h2>鬼滅の刃</h2>
    <ul>
      <li>炭治郎</li>
      <li>禰豆子</li>
      <li>我妻善逸</li>
    </ul>
  </div>
  <div class="panel">
    <h2>スパイファミリー</h2>
    <ul>
      <li>アーニャ</li>
      <li>ロイド</li>
      <li>ヨル</li>
    </ul>
  </div>
</div>

CSS

.panel {
  display: none;
  text-align: center;
}
.panel.active {
  display: block;
}

activeクラスを持つパネルのみ、display: block;で表示させます。

Step3｜jQueryでタブ切り替えを実装

最後に、jQueryでタブ切り替えの動きを実装します。

$(function() {
  $('.tab').on('click', function() {
    $('.tab, .panel').removeClass('active');
 
    $(this).addClass('active');
    
    var index = $('.tab').index(this);
    $('.panel').eq(index).addClass('active');
  });
});

以下が実装の流れです。

  • ①クリックイベントを設定する。
  • ②タブとパネルからactiveクラスを外す。
  • ③クリックしたタブにactiveクラスを付与する。
  • ④クリックしたタブに対応するパネルにactiveクラスを付与する。

上記について解説します。

①クリックイベントを設定

$('.tab').on('click', function() {
　// ここに、クリックされたときの内容（イベント）を書く。
});

上記のように書くことで、「tab」クラスを持つ要素をクリックしたときのイベントを設定することができます。

②タブとパネルからactiveクラスを外す

$('.tab, .panel').removeClass('active');

removeClassは、指定したクラスを外すメソッドです。
このメソッドを使って、タブとパネルのactiveクラスを外します。

③クリックしたタブにactiveクラスを付与

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

addClassはremoveClassと逆で、指定したクラスを付与するメソッドです。
$(this)は、クリックした要素のことを指します。

この記述により、クリックしたタブにactiveクラスを付与することができます。

④クリックしたタブに対応するパネルにactiveクラスを付与

var index = $('.tab').index(this);

index()メソッドは、指定した要素の順番を取得するメソッドです。
index(this)で、クリックしたタブがtabクラスを持つ要素の中で何番目の要素なのか、インデックス番号を取得することができます。
1番目のタブをクリックした場合は０、2番目のタブをクリックした場合は１を取得します。

そして、取得した値をindexに代入します。

$('.panel').eq(index).addClass('active');

eq()メソッドは、インデックス番号を指定することで、特定の要素だけを取得するメソッドです。
$('.panel').eq(index)で、クリックしたタブのインデックス番号に対応するパネルを取得し、activeクラスを付与します。

jQueryの解説は以上となります。
console.log()をうまく使いながら、自分の手を動かして確認してみてください！

まとめ｜jQueryでタブ切り替えのイベントを実装する方法

今回はjQueryでタブ切り替えのイベントを実装する方法について、初心者向けに解説しました。
難易度はそこまで高くないので、一つずつ丁寧に理解していきましょう。

最後までお読みいただきありがとうございました！

（参考）
index()
eq()