【JavaScript&CSS】クリックやホバーで表示を切り替える（タブメニュー）

2023年8月16日

タイトルなどの見出し（タブ）をクリックまたはマウスホバーすると、それに応じた内容を表示させる『タブメニュー』の実装方法（HTML/CSS/JavaScriptコード）を、実装例とともに紹介します。

実装例とコード

クリック（タップ）で表示が変わるパターンと、マウスホバーで表示が変わるパターンの2種を実装しました。　
実際にタブをクリック（タップ）またはホバーしてみてください。

クリックで表示を切り替える

HTML / CSS / JavaScript コード

<div class="tab-container">
  <ul>
    <li class="selected" data-id="tab-1">タブ1</li>
    <li data-id="tab-2">タブ2</li>
    <li data-id="tab-3">タブ3</li>
  </ul>

  <div class="tab-content selected" id="tab-1">
    おはようございます。タブ1の内容です。
  </div>

  <div class="tab-content" id="tab-2">
    こんにちは。タブ2の内容です。
  </div>

  <div class="tab-content" id="tab-3">
    こんばんは。タブ3の内容です。
  </div>
</div>

.tab-container ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.tab-container ul li {
  width: 100%;
  padding: 8px 16px;
}

.tab-container ul li.selected {
  color: white;
  background-color: black;
}

/* 選択されていないタブは、カーソルをポインター表示にする。*/
.tab-container ul li:not(.selected) {
  cursor: pointer;
}

/* 選択されていないタブは、ホバー時に半透明にする。*/
.tab-container ul li:not(.selected):hover {
  opacity: .6;
}

/* コンテンツを非表示。 */
.tab-content {
  display: none;
}

/* selectedクラスが付いたコンテンツのみ表示。 */
.tab-content.selected {
  display: block;
  border: 2px solid black;
  padding: 8px;
  min-height: 200px;
}

const tabMenuItems = document.querySelectorAll('.tab-container ul li');
const tabContents = document.querySelectorAll('.tab-container .tab-content');

tabMenuItems.forEach(tabMenuItem => {
  tabMenuItem.addEventListener('click', () => {

    // 全てのタブからselectedクラスを外す。
    tabMenuItems.forEach(tabMenuItem => {
      tabMenuItem.classList.remove('selected');
    });
    
    // クリックされたタブのみselectedクラスを付ける。
    tabMenuItem.classList.add('selected');
    
    // 全てのタブのコンテンツからselectedクラスを外す。
    tabContents.forEach(tabContent => {
      tabContent.classList.remove('selected');
    });

    // クリックされたタブのカスタムデータ属性と同じIDを持つコンテンツに、selectedクラスを付ける。
    // カスタムデータ属性については別記事で紹介しています。
    document.getElementById(tabMenuItem.dataset.id).classList.add('selected');
  });
});

マウスホバーで表示を切り替える

HTML / CSS / JavaScript コード

<div class="tab-container">
  <ul>
    <li class="selected" data-id="tab-1">タブ1</li>
    <li data-id="tab-2">タブ2</li>
    <li data-id="tab-3">タブ3</li>
  </ul>

  <div class="tab-content selected" id="tab-1">
    おはようございます。タブ1の内容です。
  </div>

  <div class="tab-content" id="tab-2">
    こんにちは。タブ2の内容です。
  </div>

  <div class="tab-content" id="tab-3">
    こんばんは。タブ3の内容です。
  </div>
</div>

.tab-container ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.tab-container ul li {
  width: 100%;
  padding: 8px 16px;
}

.tab-container ul li.selected {
  color: white;
  background-color: black;
}

/* コンテンツを非表示。 */
.tab-content {
  display: none;
}

/* selectedクラスが付いたコンテンツのみ表示。 */
.tab-content.selected {
  display: block;
  border: 2px solid black;
  padding: 8px;
  min-height: 200px;
}

const tabMenuItems = document.querySelectorAll('.tab-container ul li');
const tabContents = document.querySelectorAll('.tab-container .tab-content');

tabMenuItems.forEach(tabMenuItem => {
  // マウスホバー時に発火するイベントは「mouseover」を使う。
  tabMenuItem.addEventListener('mouseover', () => {

    // 全てのタブからselectedクラスを外す。
    tabMenuItems.forEach(tabMenuItem => {
      tabMenuItem.classList.remove('selected');
    });
    
    // クリックされたタブのみselectedクラスを付ける。
    tabMenuItem.classList.add('selected');
    
    // 全てのタブのコンテンツからselectedクラスを外す。
    tabContents.forEach(tabContent => {
      tabContent.classList.remove('selected');
    });

    // クリックされたタブのカスタムデータ属性と同じIDを持つコンテンツに、selectedクラスを付ける。
    // カスタムデータ属性については別記事で紹介しています。
    document.getElementById(tabMenuItem.dataset.id).classList.add('selected');
  });
});