JavaScript

✅【初心者向け】jQueryで簡単に作れる！タブ切り替えボタンの実装方法🎯

2025.04.29

目次[-]

1. 💡 タブ切り替えって何？
2. 📌 今回の完成イメージ
3. 🛠 HTML（タブの構造）

3.1. 🎨 CSS（簡単なスタイル）
3.2. 💻 jQuery（クリックで切り替え）

4. 🔍 解説ポイント
5. 📎 応用ヒント
6. 💬 最後に

💡 タブ切り替えって何？

タブ切り替えとは、以下のような機能です👇

ボタンをクリックすると表示される内容が切り替わる
よくある「料金表」「プランの比較」「カテゴリ別の説明」などに使われます！

📌 今回の完成イメージ

タブボタンをクリックすると、それに対応するコンテンツが表示される機能を作ります！

🛠 HTML（タブの構造）

まずはHTMLを用意しましょう👇

<div class="tab-menu">
  <button class="tab-btn active" data-tab="tab1">タブ1</button>
  <button class="tab-btn" data-tab="tab2">タブ2</button>
  <button class="tab-btn" data-tab="tab3">タブ3</button>
</div>

<div class="tab-content-wrap">
  <div class="tab-content active" id="tab1">タブ1の内容です</div>
  <div class="tab-content" id="tab2">タブ2の内容です</div>
  <div class="tab-content" id="tab3">タブ3の内容です</div>
</div>

🎨 CSS（簡単なスタイル）

.tab-menu {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.tab-btn {
  padding: 10px 20px;
  border: none;
  background: #eee;
  cursor: pointer;
}

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

.tab-content {
  display: none;
}

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

💻 jQuery（クリックで切り替え）

$(function () {
  $('.tab-btn').on('click', function () {
    const tabID = $(this).data('tab');

    // ボタンのactive切り替え
    $('.tab-btn').removeClass('active');
    $(this).addClass('active');

    // コンテンツのactive切り替え
    $('.tab-content').removeClass('active');
    $('#' + tabID).addClass('active');
  });
});