【超簡単！】JavaScriptを使ったタブメニューの作り方

超簡単！JavaScriptを使ったタブメニューの作り方 JS

こんにちは！さこちゃんです。

さこちゃん
さこちゃん

JSでタブメニューを作りたいけど難しそう・・・

ご安心を！！！
タブメニューって実は初歩的なCSSとJSで超簡単に実装できるんです！

今回の記事はこんな方におすすめ！

  • タブメニューを初めて実装する方
  • シンプルなタブメニューを作りたい方
  • JavaScriptを勉強中の方

デモ紹介

今回はこちらのデモを目指しましょう！

jQueryを使って、タブをクリックしたらタブと表示エリアに「is-active」というクラス名の付与・除去を行うことで、対応するパネルを表示する、という動きの仕組みです。


それではさっそく実装していきましょう〜〜〜

HTMLの書き方

STEP1　jQueryを読み込む

まずはjQueryを読み込みましょう〜
これがないとタブが動きませんので忘れずに！

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

最新のjQueryはこちらからとってね
>>　jQuery公式ページ

STEP2　HTMLを書く

HTML構造はこちらです。

タブ（.tab__list）と表示エリア（.tab__panel）のHTMLを記載します。
タブのhrefには、飛び先のidを記載します。
表示エリアのidには、タブのhrefと同じidを記載します。

<div class="allwrap">
    <div class="tab__container">
        <ul class="tab__list">
            <li class="tab__btn is-active"><a href="#tab01">タブ1</a></li>
            <li class="tab__btn"><a href="#tab02">タブ2</a></li>
            <li class="tab__btn"><a href="#tab03">タブ3</a></li>
        </ul>

        <div class="tab__content">
            <div class="tab__panel is-active" id="tab01">
                <h2>タブ1</h2>
                <p>このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。</p>
            </div>
            <div class="tab__panel" id="tab02">
                <h2>タブ2</h2>
                <p>このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。</p>
            </div>
            <div class="tab__panel" id="tab03">
                <h2>タブ3</h2>
                <p>このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。</p>
            </div>
        </div>
    </div>
</div>

ページ表示時にタブ1を開いた状態にしたい場合は、.tab__panelに「is-active」をつけておきましょう！

HTMLはこれで完了です！
次にCSSを調整していきましょう〜

CSSをあててゆく〜

タブメニューの見た目を整えていきましょう〜

STEP1　タブを切り替える前の見た目を調整

まずはタブを切り替える前の見た目を調整していきます

/* タブのボタンを横並びに */
.tab__list {
  display: flex;
  justify-content: center;
  gap: 1em;
  padding: 0;
  margin: 0;
}

/* タブのボタンの大きさを調整 */
.tab__btn {
  list-style: none;
  width: 180px;
  padding: 10px 20px;
  margin: 0 2px;
  background: #ddd;
}

/* タブのボタン内のテキストを調整 */
.tab__btn a {
  display: block;
  color: #000;
  text-align: center;
  text-decoration: none;
}

/* タブの表示エリアを非表示にする */
.tab__panel {
  display: none;
  background: #FFF;
  padding: 50px 20px;
}

ポイントは「タブの表示エリアを非表示にする」ことです。
クリック時に表示エリアを表示させたいので、この時点ではdisplay: none;で非表示にしておきましょう！

STEP2　タブを切り替えた後の見た目を調整

次にタブを切り替えた後の見た目を調整します。
以下を先ほどのコードに続く形で追記しましょう。

/* クリック時に非表示エリアを表示 */
.tab__panel.is-active {
  display: block;
}

/* クリック時にボタンの色を変える */
.tab__btn.is-active {
  background: #9a9a9b;
}

先ほどdisplay: none;で非表示にしたエリアにis-activeを付与することで、表示状態にします。
これにより表示エリアの表示/非表示が可能になりました！

CSSの完全版はこちら。
コピペして使ってくださいね〜

.tab__list {
  display: flex;
  justify-content: center;
  gap: 1em;
  padding: 0;
  margin: 0;
}
.tab__btn {
  list-style: none;
  width: 180px;
  padding: 10px 20px;
  margin: 0 2px;
  background: #ddd;
}
.tab__btn.is-active {
  background: #9a9a9b;
}
.tab__btn a {
  display: block;
  color: #000;
  text-align: center;
  text-decoration: none;
}
.tab__panel {
  display: none;
  background: #FFF;
  padding: 50px 20px;
}
.tab__panel.is-active {
  display: block;
}

JSを記述してゆく〜

残るは動きの制御のみです！

まずはfunction GethashID(hashIDName)でタブメニューの切り替えを実行します。

function GethashID (hashIDName){
	if(hashIDName){ 
		$('.tab__btn').find('a').each(function() { 
			var idName = $(this).attr('href'); 
			if(idName == hashIDName){ 
				var parentElm = $(this).parent();
				$('.tab__btn').removeClass("is-active"); 
				$(parentElm).addClass("is-active"); 

				$(".tab__panel").removeClass("is-active");
				$(hashIDName).addClass("is-active");
			}
		});
	}
}

コードの解説

  • タブのリンク（.tab__btn）の中から、hrefが一致するものを探して
  • そのタブと対応するコンテンツ（.tab__panel）を「表示状態（is-active）」にする
  • それ以外は全部「非表示（is-activeを外す）」

次にタブをクリック時のイベントハンドラを追記します。
先ほどのコードの下にこちらを追記してください。

$('.tab__btn a').on('click', function() {
	var idName = $(this).attr('href'); 
	GethashID(idName);
	return false;
});

コードの解説

  • .tab__btn a（タブリンク）がクリックされたら発火
  • タブ内の リンク名（例：#tab01）を取得
  • GethashID() に渡して、タブ切り替えを実行
  • return false; でリンクのデフォルト動作（ページ内ジャンプ）を無効化

JSの完全版はこちら。
コピペして使ってくださいね〜

function GethashID (hashIDName){
	if(hashIDName){ 
		$('.tab__btn').find('a').each(function() { 
			var idName = $(this).attr('href'); 
			if(idName == hashIDName){ 
				var parentElm = $(this).parent();
				$('.tab__btn').removeClass("is-active"); 
				$(parentElm).addClass("is-active"); 

				$(".tab__panel").removeClass("is-active");
				$(hashIDName).addClass("is-active");
			}
		});
	}
}

$('.tab__btn a').on('click', function() {
	var idName = $(this).attr('href'); 
	GethashID(idName);
	return false;
});

以上でデモ通りの動きが完成したはずです！

おわりに

いかがでしたか？
初心者でもわかりやすいようJavaScriptを使ったタブメニューの作り方をご紹介しました。

簡単に実装できるのでぜひ試してみてくださいね。