jQueryでタブ切り替えの中にさらにタブ切り替えを作る方法【コピペOKサンプル付き】

Posted on by

タブ切り替えを使ったUIは、限られたスペースで多くの情報を整理するのに非常に便利です。
今回はその応用として、「タブの中にさらに別のタブ（子タブ）を設置する」
入れ子構造のタブ切り替えをjQueryで実装する方法をご紹介します。

完成イメージ

  • 上部に「親タブ」があり、切り替えるとその中に「子タブ」が表示される
  • 親タブと子タブはそれぞれ独立して切り替えが可能
  • HTML・CSS・jQueryの基本知識でカスタマイズも簡単

HTMLの書き方

まずはHTML構造です。親タブと、その中に子タブを配置します。

<div class="tab-parent">
  <!-- 親タブメニュー -->
  <ul class="tab-menu">
    <li class="active"><a href="#parent1">親タブ1</a></li>
    <li><a href="#parent2">親タブ2</a></li>
  </ul>

  <!-- 親タブ1の内容（子タブ含む） -->
  <div id="parent1" class="tab-content active">
    <p>親タブ1の内容</p>

    <!-- 子タブメニュー -->
    <ul class="child-tab-menu">
      <li class="active"><a href="#child1-1">子タブ1-1</a></li>
      <li><a href="#child1-2">子タブ1-2</a></li>
    </ul>

    <!-- 子タブのコンテンツ -->
    <div id="child1-1" class="child-tab-content active">子タブ1-1の内容です。</div>
    <div id="child1-2" class="child-tab-content">子タブ1-2の内容です。</div>
  </div>

  <!-- 親タブ2の内容（子タブなし） -->
  <div id="parent2" class="tab-content">
    <p>親タブ2の内容です。</p>
  </div>
</div>

CSSスタイル

以下のCSSで親子タブの見た目を整えましょう。

/* 親・子タブ共通 */
.tab-menu,
.child-tab-menu {
  display: flex;
  list-style: none;
  padding: 0;
  margin-bottom: 10px;
  border-bottom: 2px solid #ccc;
}

.tab-menu li,
.child-tab-menu li {
  margin-right: 10px;
}

.tab-menu li a,
.child-tab-menu li a {
  display: inline-block;
  padding: 10px 15px;
  text-decoration: none;
  color: #333;
  border: 1px solid #ccc;
  border-bottom: none;
  background: #f9f9f9;
  border-radius: 5px 5px 0 0;
}

.tab-menu li.active a,
.child-tab-menu li.active a {
  background: #fff;
  color: #000;
  font-weight: bold;
  border-bottom: 2px solid #fff;
}

/* コンテンツ非表示 */
.tab-content,
.child-tab-content {
  display: none;
  padding: 15px;
  border: 1px solid #ccc;
  background: #fff;
}

/* アクティブ表示 */
.tab-content.active,
.child-tab-content.active {
  display: block;
}

jQueryのスクリプト

以下を<script>タグ内または別ファイルに記述して読み込んでください。

$(function () {
  // 親タブ切り替え
  $('.tab-menu li a').on('click', function (e) {
    e.preventDefault();
    const target = $(this).attr('href');

    $('.tab-menu li').removeClass('active');
    $(this).parent().addClass('active');

    $('.tab-content').removeClass('active');
    $(target).addClass('active');
  });

  // 子タブ切り替え（現在表示中の親タブ内のみ対象）
  $('.child-tab-menu li a').on('click', function (e) {
    e.preventDefault();
    const target = $(this).attr('href');
    const $parent = $(this).closest('.tab-content');

    $parent.find('.child-tab-menu li').removeClass('active');
    $(this).parent().addClass('active');

    $parent.find('.child-tab-content').removeClass('active');
    $parent.find(target).addClass('active');
  });
});

実装のポイント

  • .closest('.tab-content') を使うことで、現在表示中の親タブ内だけで子タブの切り替えを完結できます。
  • HTMLのIDは重複させないように気をつけましょう。
  • スタイルはテーマに合わせて自由にカスタマイズできます。

応用アイデア

  • タブの中にフォームや画像ギャラリーを配置
  • WordPressのカスタムフィールドやACFと連携
  • スマホ用にアコーディオン化

✅ まとめ

「タブの中にさらにタブ」を実装することで、情報量の多いページでもユーザーが迷わず操作できます。
今回のコードはそのまま使えるサンプルですので、コピペしてぜひプロジェクトに活用してください！