【JavaScript】タブメニューの実装方法

2024年2月7日

今回はJavaScriptを使用してタブメニューを実装する方法を簡単に解説します。

タブメニューは、複数のコンテンツを表示する際にユーザーがそれらを簡単に切り替えるための便利なUI要素です。具体的には、HTML、CSS、JavaScriptを使用して、タブの切り替え機能を実装します。

実装サンプル

実装方法

HTMLの構造とスタイリング

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>タブメニュー</title>
</head>
<body>

<div class="tabs">
  <button class="tablink tablink-01" onclick="openTab('tab1')">タブ1</button>
  <button class="tablink tablink-02" onclick="openTab('tab2')">タブ2</button>
  <button class="tablink tablink-03" onclick="openTab('tab3')">タブ3</button>
</div>

<div id="tab1" class="tab active">
  <h2>タブ1のコンテンツ</h2>
  <p>タブ1の内容をここに記述します。</p>
</div>

<div id="tab2" class="tab">
  <h2>タブ2のコンテンツ</h2>
  <p>タブ2の内容をここに記述します。</p>
</div>

<div id="tab3" class="tab">
  <h2>タブ3のコンテンツ</h2>
  <p>タブ3の内容をここに記述します。</p>
</div>
</body>
</html>

CSS

.tab {
  display: none; 
}

.active {
  display: block; 
}

#tab1 {
  background: red;
}

#tab2 {
  background: blue;
}

#tab3 {
  background: green;
}

タブメニューのHTML構造は、選択肢となるタブ（ボタン）の部分と、各タブに対応するコンテンツの部分から構成されます。

buttonにはそれぞれクリックイベントを指定していますがこれは後で解説します。

各タブにはわかりやすいように異なる色のbackgroundを指定しています。

tabクラスは初期の状態では非表示なっており、activeクラスが付与された場合表示されるような仕様でJavascriptを書いていきます。

JavaScriptを使ったタブの切り替え処理

JavaScript

function openTab(tabName) {
  let tabs = document.getElementsByClassName("tab");
  for (let i = 0; i < tabs.length; i++) {
    tabs[i].classList.remove("active");
  }

 document.getElementById(tabName).classList.add("active");
}

openTabというボタンがクリックされたときに選択されたタブを表示する関数を用意します。

引数として割らされたタブ名に対応するタブにactiveクラスを追加しています。

これにより、タブメニューが実装され、ユーザーがタブをクリックすることで、対応するコンテンツが表示されます。

まとめ

今回は実務でちょくちょくでてくるタブメニューを機能だけに絞って簡単に実装しました。

ボタンに対応するコンテンツにactiveクラスを追加したり取ったりするだけですね。

実務で使う場合はもっとスタイリングしたりタブボタンにもクラスを追加したりなどして使ってください。

ブログ

BLOG

実装サンプル

実装方法

HTMLの構造とスタイリング

JavaScriptを使ったタブの切り替え処理

まとめ