表示切り替えボタンの表示対象を複数設定する方法

javascriptコードは以下のサイトからコピぺしています。
https://blog-and-destroy.com/24218

ページ内にボタン切り替えコンテンツを作りたいのですが、上記の参考サイトのコードは１つのボタンにつき１つの要素内しか切り替えができません。

他の要素内の内容も連動して切り替えを行うにはどうすればよいでしょうか？

html
1<!DOCTYPE html>
2<html>
3    <head>
4    <script>
5        document.addEventListener('DOMContentLoaded', function(){
6        const tabs = document.getElementsByClassName('tab');
7        for(let i = 0; i < tabs.length; i++) {
8            tabs[i].addEventListener('click', tabSwitch, false);
9        }
10        function tabSwitch(){
11            document.getElementsByClassName('is-active')[0].classList.remove('is-active');
12            this.classList.add('is-active');
13            document.getElementsByClassName('is-show')[0].classList.remove('is-show');
14            const arrayTabs = Array.prototype.slice.call(tabs);
15            const index = arrayTabs.indexOf(this);
16            document.getElementsByClassName('panel')[index].classList.add('is-show');
17        };
18        }, false);
19    </script>
20    <style>           
21        .tab{
22        cursor:pointer;
23        }
24        .panel{
25        display:none;
26        }
27        .panel.is-show{
28        display:block;
29        }
30    </style>
31    </head>
32    <body>
33        <ul class="tab-group">
34            <li class="tab tab-A is-active">ボタンA</li>
35            <li class="tab tab-B">ボタンB</li>
36            <li class="tab tab-C">ボタンC</li>  
37        </ul>
38
39            A、B、Cの表示場所↓
40            <div class="panel tab-A is-show">Aを表示。</div>
41            <div class="panel tab-B">Bを表示。</div>
42            <div class="panel tab-C">Cを表示。</div>
43
44
45            A2、B2、C2の表示場所↓
46            <div class="tab-A2">Aがいるときだけ表示されたいA2を表示。</div>
47            <div class="tab-B2">Bがいるときだけ表示されたいB2を表示。</div>
48            <div class="tab-C2">Cがいるときだけ表示されたいC2を表示。</div>
49    <body>
50</html>

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

回答1件

ベストアンサー

いくつかやりようはありそうですがこんな感じで？

javascript
1<script>
2document.addEventListener('click',e=>{
3  const t=e.target;
4  if(t.matches('[data-target]')){
5    document.querySelectorAll(t.dataset.target).forEach(x=>x.classList.remove('is-show'));
6    document.querySelectorAll(t.dataset.show).forEach(x=>x.classList.add('is-show'));
7  }
8});
9</script>
10<style>           
11.panel:not(.is-show),
12.panel2:not(.is-show){
13display:none;
14}
15</style>
16<ul class="tab-group">
17<li class="tab is-active" data-show=".tab-A,.tab-A2" data-target=".panel,.panel2">ボタンA</li>
18<li class="tab" data-show=".tab-B,.tab-B2" data-target=".panel,.panel2">ボタンB</li>
19<li class="tab" data-show=".tab-C,.tab-C2" data-target=".panel,.panel2">ボタンC</li>  
20</ul>
21
22<div class="panel tab-A is-show">Aを表示。</div>
23<div class="panel tab-B">Bを表示。</div>
24<div class="panel tab-C">Cを表示。</div>
25
26
27<hr>
28<div class="panel2 tab-A2 is-show">Aがいるときだけ表示されたいA2を表示。</div>
29<div class="panel2 tab-B2">Bがいるときだけ表示されたいB2を表示。</div>
30<div class="panel2 tab-C2">Cがいるときだけ表示されたいC2を表示。</div>