jQueryでの2段タブの実装

実現したいこと

タブAをクリック
↓
タブBを表示
↓
タブBをクリック
↓
表を表示

前提

以下の1段のタブの実装を参考に、2段のタブの実装を試みましたが、
最後の表の表示がうまくいかずに困っています。

参考のソースコード

HTML
1<!--タブ-->
2<ul class="tab-group">
3	<li class="tab is-active">Tab-A</li>
4	<li class="tab">Tab-B</li>
5	<li class="tab">Tab-C</li>
6</ul>
7
8<!--タブを切り替えて表示するコンテンツ-->
9<div class="panel-group">
10	<div class="panel is-show">Content-A</div>
11	<div class="panel">Content-B</div>
12	<div class="panel">Content-C</div>
13</div>

jQuery
1jQuery(function($){
2	$('.tab').click(function(){
3		$('.is-active').removeClass('is-active');
4		$(this).addClass('is-active');
5		$('.is-show').removeClass('is-show');
6        // クリックしたタブからインデックス番号を取得
7		const index = $(this).index();
8        // クリックしたタブと同じインデックス番号をもつコンテンツを表示
9		$('.panel').eq(index).addClass('is-show');
10	});
11});

該当のソースコード

HTML
1   <ul class="tab-group">
2        <li class="tab is-active">tabA</li>
3        <li class="tab">tabB</li>
4        <li class="tab">tabC</li>
5    </ul>
6
7    <!--タブを切り替えて表示するコンテンツ-->
8    <div class="panel-group">
9        <div class="panel is-show">
10            <ul class="tab-group-sub">
11                <li class="tab-sub is-active">subA</li>
12            </ul>
13        </div>
14        <div class="panel">
15            <ul class="tab-group-sub">
16                <li class="tab-sub">subA</li>
17                <li class="tab-sub">subB</li>
18                <li class="tab-sub">subC</li>
19            </ul>
20        </div>
21        <div class="panel">
22          <ul class="tab-group-sub">
23                <li class="tab-sub">subA</li>
24                <li class="tab-sub">subB</li>
25                <li class="tab-sub">subC</li>
26            </ul>
27        </div>
28    </div>
29
30    <!--サブタブを切り替えて表示するコンテンツ-->
31    <div class="panel-group-sub">
32        <div class="panel-sub is-show">
33            <table>
34            </table>
35        </div>
36        <div class="panel-sub">
37            <table>
38            </table>
39            <table>
40            </table>
41            <table>
42            </table>
43        </div>
44        <div class="panel">
45            <table>
46            </table>
47            <table>
48            </table>
49            <table>
50            </table>
51         </div>
52    </div>

jQuery
1jQuery(function($){
2	$('.tab').click(function(){
3		$('.is-active').removeClass('is-active');
4		$(this).addClass('is-active');
5		$('.is-show').removeClass('is-show');
6        // クリックしたタブからインデックス番号を取得
7		const index = $(this).index();
8        // クリックしたタブと同じインデックス番号をもつコンテンツを表示
9		$('.panel').eq(index).addClass('is-show');
10	});
11});

よろしくお願いいたします。

Cocode

2023/02/07 15:33

CSSもご提示お願いします。第三者が不具合も含めて再現できるコードをご提供いただけると幸いですー

行動規範の内容に同意します

回答1件

ベストアンサー

HTML構造をどうするかと、タブがどこに紐づいているかどう指定するかによります

javascript
1<style>
2.is-active{background-Color:gray;}
3.hide{display:none;}
4</style>
5<script>
6window.addEventListener('DOMContentLoaded', ()=>{
7  document.querySelectorAll('.tab-sub ,.panel').forEach(x=>x.classList.add('hide'));
8  const ce = new CustomEvent("HTMLEvents");
9  ce.initEvent('click', true, true );
10  document.querySelector('.is-active').dispatchEvent(ce);
11});
12document.addEventListener('click', e=>{
13  const setHide=t=>{
14    t.closest('ul').querySelector('.is-active')?.classList.remove('is-active');
15    t.classList.add('is-active');
16    document.querySelectorAll(t.dataset.target).forEach(x=>x.classList.toggle('hide',!x.closest(t.dataset.show)));
17  };
18  const t=e.target;
19  if(t.matches('.tab')){
20    setHide(t);
21    document.querySelector('.tab-sub.is-active')?.classList.remove('is-active');
22    document.querySelector('.panel:not(.hide)')?.classList.add('hide');
23  }
24  if(t.matches('.tab-sub')){
25    setHide(t);
26  }
27},true);
28</script>
29
30<ul class="tab-group">
31<li class="tab is-active" data-target=".tab-sub" data-show=".sub-a">tabA</li>
32<li class="tab" data-target=".tab-sub" data-show=".sub-b">tabB</li>
33<li class="tab" data-target=".tab-sub" data-show=".sub-c">tabC</li>
34</ul>
35<ul>
36<li class="tab-sub sub-a" data-target=".panel" data-show="#panel-a-1">subA-1</li>
37<li class="tab-sub sub-a" data-target=".panel" data-show="#panel-a-2">subA-2</li>
38<li class="tab-sub sub-a" data-target=".panel" data-show="#panel-a-3">subA-3</li>
39<li class="tab-sub sub-b" data-target=".panel" data-show="#panel-b-1">subB-1</li>
40<li class="tab-sub sub-b" data-target=".panel" data-show="#panel-b-2">subB-2</li>
41<li class="tab-sub sub-b" data-target=".panel" data-show="#panel-b-3">subB-3</li>
42<li class="tab-sub sub-c" data-target=".panel" data-show="#panel-c-1">subC-1</li>
43<li class="tab-sub sub-c" data-target=".panel" data-show="#panel-c-2">subC-2</li>
44<li class="tab-sub sub-c" data-target=".panel" data-show="#panel-c-3">subC-3</li>
45</ul>
46<div>
47<div class="panel" id="panel-a-1"><table><tr><td>tbl-a-1</td></tr></table></div>
48<div class="panel" id="panel-a-2"><table><tr><td>tbl-a-2</td></tr></table></div>
49<div class="panel" id="panel-a-3"><table><tr><td>tbl-a-3</td></tr></table></div>
50<div class="panel" id="panel-b-1"><table><tr><td>tbl-b-1</td></tr></table></div>
51<div class="panel" id="panel-b-2"><table><tr><td>tbl-b-2</td></tr></table></div>
52<div class="panel" id="panel-b-3"><table><tr><td>tbl-b-3</td></tr></table></div>
53<div class="panel" id="panel-c-1"><table><tr><td>tbl-c-1</td></tr></table></div>
54<div class="panel" id="panel-c-2"><table><tr><td>tbl-c-2</td></tr></table></div>
55<div class="panel" id="panel-c-3"><table><tr><td>tbl-c-3</td></tr></table></div>
56</div>