【jQuery】JSでタブの中にタブを設置する方法

シュウ

今回は【jQuery】JSでタブの中にタブを設置する方法！
の解説になります！

タブUIを実装したいフロントエンド初心者の方です。
1段階ではなく、階層構造のUIを作りたい方です。
今回はコピペで簡単に作れるように解説しております。

[記事の内容]

タブの中にさらにタブを設置について

通常のタブUIは1階層のみですが、タブの中にさらにタブを設置することで、情報を整理しやすくなります。
完成形のイメージを確認します。
デモサイトはコチラから。
親タブをクリックすると、その中に子タブが表示される構造です。

HTMLの記述方法について

まずはベースとなるHTML構造を作成します。親タブと子タブを分けて記述することがポイントです。
基本構造の書き方は以下のようになります。

<div class="contents">
 <div class="tab">
  <ul class="top-btn">
   <li class="tab-btn active" data-tab="tab1">タブ1</li>
   <li class="tab-btn" data-tab="tab2">タブ2</li>
  </ul>
 </div>
 <!--tab 上のボタンを用意-->

　<div id="tab1" class="tab-content active">
　　<p>タブ1の内容です</p>
　　<!-- 子タブ -->
　　　<ul class="sub-tab">
　　　　<li class="sub-tab-btn active" data-sub="sub1">サブ1</li>
　　　　<li class="sub-tab-btn" data-sub="sub2">サブ2</li>
　　　</ul>
　　　<!-- コンテンツ（↑ボタンの下に配置） -->
　　　<div class="sub-contents">
　　　<div id="sub1" class="sub-content active">サブ1の内容</div>
　　　<div id="sub2" class="sub-content">サブ2の内容</div>
　　</div>
　</div>
　<!--tab1の全体を囲む(コンテンツ)-->

　<div id="tab2" class="tab-content">
  <p>タブ2の内容です</p>
  <!-- 子タブ -->
   <ul class="sub-tab">
    <li class="sub-tab-btn active" data-sub="sub3">サブ2-1</li>
    <li class="sub-tab-btn" data-sub="sub4">サブ2-2</li>
   </ul>
   <!-- コンテンツ（ボタンの下に配置） -->
   <div class="sub-contents">
    <div id="sub3" class="sub-content active">サブ3の内容</div>
    <div id="sub4" class="sub-content">サブ4の内容</div>
   </div>		
　</div>
　<!--tab2の全体を囲む(コンテンツ)-->
</div>

●①ボタンの設置: top-btnを用意します。
data-tab="tab1"、data-tab="tab2"と、ボタンが増える度に、data-tabの中身を数字を変更してください。
※1つ目にactiveを忘れずに、記述しておいてください。

●②コンテンツの準備: id="tab1" class="tab-content active"〜/div
の中に、更に、ボタンをコンテンツを準備してください。
※1つ目にactiveを忘れずに、記述しておいてください。
※ボタンのdata-sub="sub○"、コンテンツのid="sub○"は、合わせておくようにしておいてください。

●③コンテンツの準備-2: id="tab2" class="tab-content"〜/div
2つ目以降のコンテンツには、activeは記述しないように、id="tab2"と指定してください。
※3つ目を追加する際には、id="tab3"と指定してください。

CSSのスタイル調整について

見た目を整えるためにCSSを設定します。activeクラスの切り替えが重要です。
書き方は以下のようになります。

/* 全体 */
.contents {
    max-width: 960px;
    width: 94%;
    margin: 5rem auto;
}
/* =========================
   親タブ（上）
========================= */
.top-btn {
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
    border-bottom: 2px solid #ccc;
}
.tab-btn {
    font-size: 18px;
    font-weight: bold;
    flex: 1;
    text-align: center;
    padding: 20px;
    cursor: pointer;
    background: #eee;
    border: 1px solid #ccc;
    border-bottom: none;
    transition: 0.2s;
}
.tab-btn + .tab-btn {
    border-left: none;
}
/* アクティブ */
.tab-btn.active {
    background: #395848;
    color: #fff;
    font-weight: bold;
}
/* =========================
   タブコンテンツ
========================= */
.tab-content {
    display: none;
    border: 1px solid #ccc;
    padding: 20px;
}
.tab-content.active {
    display: block;
}
/* =========================
   子タブ（中）
========================= */
.sub-tab {
    display: flex;
    padding: 0;
    margin: 20px 0 0;
    list-style: none;
    border-bottom: 2px solid #ccc;
}
.sub-tab-btn {
    font-size: 16px;
    font-weight: bold;
    flex: 1;
    text-align: center;
    padding: 14px;
    cursor: pointer;
    background: #f5f5f5;
    border: 1px solid #ccc;
    border-bottom: none;
    transition: 0.2s;
}
.sub-tab-btn + .sub-tab-btn {
    border-left: none;
}
.sub-tab-btn.active {
    background: #395848;
    color: #fff;
}
/* =========================
   子コンテンツ（下）
========================= */
.sub-contents {
    border: 1px solid #ccc;
    padding: 15px;
}
.sub-content {
    display: none;
}
.sub-content.active {
    display: block;
}

●①アクティブの指定: ※基本的に、ボタンや、コンテンツに関するCSSは自由です。
ここでは、要点だけをまとめます。
.tab-btn.activeで、active時にCSSを適用させます。

●②タブコンテンツに指定: .tab-content、.sub-contentには、display: noneを指定しておきます。
※現状だと、tab1、tab2のコンテンツが表示してしまいます。
jsで、クリックした際に、コンテンツを表示させる指定を行うために、一旦「display: none」を指定しております。

JavaScriptで動作を制御について

JavaScriptでクリック時の切り替え処理を実装します。親タブと子タブをそれぞれ制御します。
書き方は以下のようになります。

// 親タブ
document.querySelectorAll('.tab-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
    document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
    btn.classList.add('active');
    document.getElementById(btn.dataset.tab).classList.add('active');
  });
});

// 子タブ
document.querySelectorAll('.sub-tab-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const parent = btn.closest('.tab-content');
    parent.querySelectorAll('.sub-tab-btn').forEach(b => b.classList.remove('active'));
    parent.querySelectorAll('.sub-content').forEach(c => c.classList.remove('active'));
    btn.classList.add('active');
    parent.querySelector('#' + btn.dataset.sub).classList.add('active');
  });
});