2022/2/25

【jQuery】タブの切り替えメニューを簡単に実装する方法【コピペOK】

Coding

タブの切り替えメニューってどうやって実装するの？

そんな疑問にお答えします。

タブの切り替えメニューの仕組みはよくわかっていないけどコピペで使っている。

あなたはそうではないですか？

僕は最初はそうでした。

でもコピペで動かないとき、仕組みが理解できていないと修正はできません。

この機会に仕組みを理解した上でコピペで使い回せるようにしておきましょう。

1 タブの切り替えメニュー

タブの切り替えメニュー

完成形はこちらです。

今回は

最初のコンテンツは表示しておく
タブをクリックするごとにコンテンツを切り替える

というものを作ります。

jQuery本体を読み込む

まず事前準備としてjQuery本体を読み込みます。

読み込み方がわからない方はコチラの記事を参照ください。

【初心者向け】jQuery本体を読み込む方法

jQueryがきちんと動作するかしっかり確認しておきましょう。

コード

まずすべてのコードを貼っておきます。

<div class="tab-container">
  <ul class="tab-list">
    <li class="tab current">タブ1</li>
    <li class="tab">タブ2</li>
    <li class="tab">タブ3</li>
  </ul>
  <div class="content-wrapper">
    <div class="content-box">コンテンツ1</div>
    <div class="content-box">コンテンツ2コンテンツ2</div>
    <div class="content-box">コンテンツ3コンテンツ3コンテンツ3</div>
  </div>
</div>

.tab-container {
  width: 100%;
  max-width: 600px;
  margin: 50px auto 0;
}

.tab-list {
  display: flex;
  border: 1px solid #ccc;
}

.tab {
  display: flex;
  flex: 1;
  justify-content: center;
  color: #333;
  border-right: 1px solid #ccc;
  padding: 1em;
  cursor: pointer;
}

.tab:last-child {
  border-right: none;
}

.tab.current {
  background-color: #00CC99;
  color: #fff;
}

.content-box {
  width: 100%;
  max-width: 600px;
  background-color: #EEEEEE;
  color: #333;
  padding: 3em;
}

$(function () {
  //最初のコンテンツ以外は非表示
  $(".content-box:not(:first-of-type)").css("display", "none");
  //タブをクリックしたら
  $(".tab").on("click", function () {
    //現在選択中のタブからcurrentクラスを外す
    $(".current").removeClass("current");
    //クリックしたタブにcurrentクラスを付与
    $(this).addClass("current");
    //クリックしたタブのインデックス番号を取得
    const index = $(this).index();
    //コンテンツを非表示、クリックしたタブのインデックス番号と同じコンテンツを表示
    $(".content-box").hide().eq(index).show();
  });
});

解説

HTML

<li class="tab current">タブ1</li>

ここでのポイントは、タブ1に「current」クラスをつけている所です。

これは現在選択中のタブということを意味しています。

つまり最初はタブ1が選択されている状態だということです。

CSS

.tab.current {
  background-color: #00CC99;
  color: #fff;
}

ここでは選択中のタブの文字色、背景色を指定しています。

jQuery

上から順番に見ていきます。

①最初のコンテンツ以外は非表示にする

$(".content-box:not(:first-of-type)").css("display", "none");

最初のコンテンツのみ表示させたいので、最初以外は非表示という指定をします。

これと同じ意味で

.content-box { 
  display: none;
}

としておいて

$(".content-box:first-of-type").css("display", "block");

としてもOKです。

②クリックイベント時の記述

$(".tab").on("click", function () {
  //  タブをクリックしたときの処理
});

ここはクリックイベントの場合の定型です。

この中に処理を書いていきます。

③現在選択中のタブからcurrentクラスを外す

$(".current").removeClass("current");

removeClass()は外したいclass名を指定します。

これにより最初につけているcurrentクラスを外します。

④クリックしたタブにcurrentクラスを付与

$(this).addClass("current");

addClass()は付与したいclass名を指定します。

これによりクリックしたタブにcurrentクラスを付与します。

⑤クリックしたタブのインデックス番号を取得

const index = $(this).index();

index()は特定の要素のインデックス番号を取得（クリックされた要素が何番目か取得）するメソッドです。

クリックしたタブのインデックス番号を取得して変数indexに代入します。

きちんと取得できているか確認してみます。

const index = $(this).index();
console.log(index); // 確認用

タブのインデックス番号を取得する

値が取れていることがわかります。

⑥コンテンツを非表示にし、クリックしたタブのインデックス番号と同じコンテンツを表示する

$(".content-box").hide().eq(index).show();

これは分解するとこうなります。

$('.content-box').hide(); 
$('.content-box').eq(index).show();

hide()は表示されている要素を非表示にします。

eq()は複数のHTML要素の中からインデックス番号を指定することで特定の要素だけを取得します。

よってここで行われる処理は

content-boxはhideで非表示にする
クリックしたタブのindex番号と同じcontent-box番号を表示させる

となります。

これにてタブの切り替えメニューの実装が完成です。

以上となります。

コメントを残すコメントをキャンセル

投稿者トシ