JavaScriptでタブ切り替えUIを実装｜標準APIだけで軽量＆簡単！

17

Views

ライブラリなしでタブUIを実装したいときは、JavaScriptの標準APIだけで十分対応可能です。この記事では、HTML・CSS・JavaScriptを使って、シンプルで拡張性の高い「タブ切り替えUI」の作り方を解説します。

実装イメージ

  • ボタンをクリックすると該当タブの内容が表示
  • 非アクティブなパネルは非表示に
  • クラス切り替えでスタイル変更

HTML構造

<div class="tabs">
  <button class="tab active" data-target="#panel1">タブ1</button>
  <button class="tab" data-target="#panel2">タブ2</button>
</div>

<div class="tab-content active" id="panel1">タブ1の内容</div>
<div class="tab-content" id="panel2">タブ2の内容</div>

CSSで切り替えのスタイルを定義

.tab-content {
  display: none;
  padding: 1em;
  border: 1px solid #ccc;
}

.tab-content.active {
  display: block;
}

.tab.active {
  background-color: #333;
  color: #fff;
}

JavaScriptでタブ切り替え処理

document.addEventListener("DOMContentLoaded", () => {
  const tabs = document.querySelectorAll(".tab");
  const contents = document.querySelectorAll(".tab-content");

  tabs.forEach(tab => {
    tab.addEventListener("click", () => {
      const target = document.querySelector(tab.dataset.target);

      // すべてのタブとコンテンツのactiveを解除
      tabs.forEach(t => t.classList.remove("active"));
      contents.forEach(c => c.classList.remove("active"));

      // 対象にactiveを追加
      tab.classList.add("active");
      target.classList.add("active");
    });
  });
});

ポイントまとめ

  • data-target 属性で対象を明示
  • classList.add/removeでスタイルを切り替え
  • querySelectorAllで複数の要素を効率的に制御

おわりに

ブラウザ標準のAPIだけで、軽量でカスタマイズ性の高いタブUIを実装できます。より複雑なナビゲーションやアニメーションへの応用も可能ですので、ぜひ活用してみてください。

次回は「アコーディオンメニューとの併用パターン」などもご紹介予定です！

関連記事