【JavaScript】タブ切り替え機能の実装方法

ウェブ開発において、ページ内で複数のコンテンツを効果的に切り替えるためのタブ切り替え機能は、ユーザーエクスペリエンスを向上させる重要な要素の一つです。今回は、JavaScriptを活用してシンプルかつ効果的なタブ切り替え機能を実装する方法をご紹介します。

HTML
CSS
JavaScript
完成したコード
まとめ

HTML

最初に、タブとそれに対応するコンテンツをHTMLで適切に構造化します。各タブには一意のIDを割り当て、それに基づいてJavaScriptで切り替えを行います。

<div id="tab1" class="tab-content active-tab">
  <h2>Tab 1 Content</h2>
  <p>This is the content of tab 1.</p>
</div>

<div id="tab2" class="tab-content">
  <h2>Tab 2 Content</h2>
  <p>This is the content of tab 2.</p>
</div>

<div id="tab3" class="tab-content">
  <h2>Tab 3 Content</h2>
  <p>This is the content of tab 3.</p>
</div>

<div id="tab-buttons">
  <div class="tab-button" onclick="switchTab(1)">Tab 1</div>
  <div class="tab-button" onclick="switchTab(2)">Tab 2</div>
  <div class="tab-button" onclick="switchTab(3)">Tab 3</div>
</div>

CSS

CSSを使用して、タブやコンテンツの初期の表示状態やスタイリングを行います。非アクティブなタブコンテンツを非表示にし、アクティブなものだけが表示されるようにします。

.tab-content {
 display: none;
}

.active-tab {
 display: block;
}

.tab-button {
 cursor: pointer;
 padding: 10px 20px;
 border: 1px solid #ccc;
 background-color: #f1f1f1;
 argin-right: 5px;
}

JavaScript

JavaScriptを使用して、タブがクリックされたときに対応するコンテンツを表示するような切り替え機能を実装します。以下は、基本的な実装例です。

function switchTab(tabNumber) {
  // 選択されたタブのコンテンツを表示し、他のタブを非表示にする
  for (let i = 1; i <= 3; i++) {
    const tabContent = document.getElementById('tab' + i);
    const tabButton = document.getElementById('tab-buttons').children[i - 1];

    if (i === tabNumber) {
      tabContent.classList.add('active-tab');
      tabButton.classList.add('active-tab');
    } else {
      tabContent.classList.remove('active-tab');
      tabButton.classList.remove('active-tab');
    }
  }
}

完成したコード

最終的に、HTML、CSS、JavaScriptを組み合わせて完成したコードを得ることができます。各タブをクリックすると、対応するコンテンツが切り替わるシンプルで使いやすいタブ切り替え機能が実装されたページが完成します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .tab-content {
      display: none;
    }

    .active-tab {
      display: block;
    }

    .tab-button {
      cursor: pointer;
      padding: 10px 20px;
      border: 1px solid #ccc;
      background-color: #f1f1f1;
      margin-right: 5px;
    }
  </style>
  <title>Tab Switching</title>
</head>
<body>

<div id="tab1" class="tab-content active-tab">
  <h2>Tab 1 Content</h2>
  <p>This is the content of tab 1.</p>
</div>

<div id="tab2" class="tab-content">
  <h2>Tab 2 Content</h2>
  <p>This is the content of tab 2.</p>
</div>

<div id="tab3" class="tab-content">
  <h2>Tab 3 Content</h2>
  <p>This is the content of tab 3.</p>
</div>

<div id="tab-buttons">
  <div class="tab-button" onclick="switchTab(1)">Tab 1</div>
  <div class="tab-button" onclick="switchTab(2)">Tab 2</div>
  <div class="tab-button" onclick="switchTab(3)">Tab 3</div>
</div>

<script>
  function switchTab(tabNumber) {
    // 選択されたタブのコンテンツを表示し、他のタブを非表示にする
    for (let i = 1; i <= 3; i++) {
      const tabContent = document.getElementById('tab' + i);
      const tabButton = document.getElementById('tab-buttons').children[i - 1];

      if (i === tabNumber) {
        tabContent.classList.add('active-tab');
        tabButton.classList.add('active-tab');
      } else {
        tabContent.classList.remove('active-tab');
        tabButton.classList.remove('active-tab');
      }
    }
  }
</script>

</body>
</html>

まとめ

この実装を通じて、初心者から中級者の方まで、誰でも簡単に理解できるタブ切り替え機能の実装方法を学ぶことができるでしょう。