"ページを移動せずに内容を切り替えるタブ機能"を同じページに2つ取り入れたい

前提・実現したいこと

https://allabout.co.jp/gm/gc/23969/
上記参考にページ移動せずに内容を切り替えるタブ機能を取り入れました。
同じページにこの機能を2つ取り入れたいです。
下記ソースコードでは、片方のみしか機能しておりません。

該当のソースコード

<style>
/* ▼タブ */
#tabcontrol a {
   display: inline-block;            /* インラインブロック化 */
   border-width: 1px 1px 0px 1px;    /* 下以外の枠線を引く */
   border-style: solid;              /* 枠線の種類：実線 */
   border-color: black;              /* 枠線の色：黒色 */
   border-radius: 0.75em 0.75em 0 0; /* 枠線の左上角と右上角だけを丸く */
   padding: 0.75em 1em;              /* 内側の余白 */
   text-decoration: none;            /* リンクの下線を消す */
   color: black;                     /* 文字色：黒色 */
   background-color: white;          /* 背景色：白色 */
   font-weight: bold;                /* 太字 */
   position: relative;               /* JavaScriptでz-indexを調整するために必要 */
}
/* ▼タブにマウスポインタが載った際（任意） */
#tabcontrol a:hover {
   text-decoration: underline;   /* リンクの下線を引く */
}
/* ▼タブの中身 */
#tabbody div {
   border: 1px solid black; /* 枠線：黒色の実線を1pxの太さで引く */
   margin-top: -1px;        /* 上側にあるタブと1pxだけ重ねるために「-1px」を指定 */
   padding: 1em;            /* 内側の余白量 */
   background-color: white; /* 背景色：白色 */
   position: relative;      /* z-indexを調整するために必要 */
   z-index: 0;              /* 重なり順序を「最も背面」にするため */
}
/* ▼タブの配色 */
#tabcontrol a:nth-child(1), #tabbody div:nth-child(1) { background-color: #ffffdd; }/* 1つ目のタブとその中身用の配色 */
#tabcontrol a:nth-child(2), #tabbody div:nth-child(2) { background-color: #ddffdd; }/* 2つ目のタブとその中身用の配色 */
#tabcontrol a:nth-child(3), #tabbody div:nth-child(3) { background-color: #ddddff; }/* 3つ目のタブとその中身用の配色 */
</style>

<body>
<p id="tabcontrol">
   <a href="#tabpage1">タブ1</a>
   <a href="#tabpage2">タブ2</a>
   <a href="#tabpage3">タブ3</a>
</p>
<div id="tabbody">
   <div id="tabpage1">…… タブ1の中身 ……</div>
   <div id="tabpage2">…… タブ2の中身 ……</div>
   <div id="tabpage3">…… タブ3の中身 ……</div>
</div>

<p id="tabcontrol">
   <a href="#tabpage4">タブ4</a>
   <a href="#tabpage5">タブ5</a>
   <a href="#tabpage6">タブ6</a>
</p>
<div id="tabbody">
   <div id="tabpage4">…… タブ4の中身 ……</div>
   <div id="tabpage5">…… タブ5の中身 ……</div>
   <div id="tabpage6">…… タブ6の中身 ……</div>
</div>

<script type="text/javascript">

   var tabs = document.getElementById('tabcontrol').getElementsByTagName('a');
   var pages = document.getElementById('tabbody').getElementsByTagName('div');

   function changeTab() {
      // ▼href属性値から対象のid名を抜き出す
      var targetid = this.href.substring(this.href.indexOf('#')+1,this.href.length);

      // ▼指定のタブページだけを表示する
      for(var i=0; i<pages.length; i++) {
         if( pages[i].id != targetid ) {
            pages[i].style.display = "none";
         }
         else {
            pages[i].style.display = "block";
         }
      }

      // ▼クリックされたタブを前面に表示する
      for(var i=0; i<tabs.length; i++) {
         tabs[i].style.zIndex = "0";
      }
      this.style.zIndex = "10";

      // ▼ページ遷移しないようにfalseを返す
      return false;
   }

   // ▼すべてのタブに対して、クリック時にchangeTab関数が実行されるよう指定する
   for(var i=0; i<tabs.length; i++) {
      tabs[i].onclick = changeTab;
   }

   // ▼最初は先頭のタブを選択
   tabs[0].onclick();

</script>
</body>

試したこと

2つ目のtabcontrolとtabbodyのidを変更し、それに合わせたJavaScriptソースを追加。
（JavaScriptソースが２度記載された形）

<p id="tabcontrol2">
   <a href="#tabpage4">タブ4</a>
   <a href="#tabpage5">タブ5</a>
   <a href="#tabpage6">タブ6</a>
</p>
<div id="tabbody2">
   <div id="tabpage4">…… タブ4の中身 ……</div>
   <div id="tabpage5">…… タブ5の中身 ……</div>
   <div id="tabpage6">…… タブ6の中身 ……</div>
</div>

<script type="text/javascript">

   var tabs = document.getElementById('tabcontrol2').getElementsByTagName('a');
   var pages = document.getElementById('tabbody2').getElementsByTagName('div');

   function changeTab() {
      // ▼href属性値から対象のid名を抜き出す
      var targetid = this.href.substring(this.href.indexOf('#')+1,this.href.length);

      // ▼指定のタブページだけを表示する
      for(var i=0; i<pages.length; i++) {
         if( pages[i].id != targetid ) {
            pages[i].style.display = "none";
         }
         else {
            pages[i].style.display = "block";
         }
      }

      // ▼クリックされたタブを前面に表示する
      for(var i=0; i<tabs.length; i++) {
         tabs[i].style.zIndex = "0";
      }
      this.style.zIndex = "10";

      // ▼ページ遷移しないようにfalseを返す
      return false;
   }

   // ▼すべてのタブに対して、クリック時にchangeTab関数が実行されるよう指定する
   for(var i=0; i<tabs.length; i++) {
      tabs[i].onclick = changeTab;
   }

   // ▼最初は先頭のタブを選択
   tabs[0].onclick();

</script>

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

回答1件

ベストアンサー

document がクリックされた時、その要素に href 属性があるならば
"#" 以降の文字列を取り出し、それと同じ名前の id を持つ要素を取得する
その id要素の親から見て、最初の要素になるように移動しています。
スタイルシートでは、.tabbody の最初の div 要素だけを表示するようにしておく。

id の名前は、document の中で１つだけ許される。

js
1<style>
2/* ▼タブ */
3.tabcontrol a {
4   display: inline-block;            /* インラインブロック化 */
5   border-width: 1px 1px 0px 1px;    /* 下以外の枠線を引く */
6   border-style: solid;              /* 枠線の種類：実線 */
7   border-color: black;              /* 枠線の色：黒色 */
8   border-radius: 0.75em 0.75em 0 0; /* 枠線の左上角と右上角だけを丸く */
9   padding: 0.75em 1em;              /* 内側の余白 */
10   text-decoration: none;            /* リンクの下線を消す */
11   color: black;                     /* 文字色：黒色 */
12   font-weight: bold;                /* 太字 */
13}
14/* ▼タブにマウスポインタが載った際（任意） */
15.tabcontrol a:hover {
16   text-decoration: underline;   /* リンクの下線を引く */
17}
18/* ▼タブの中身 */
19.tabbody div {
20   border: 1px solid black; /* 枠線：黒色の実線を1pxの太さで引く */
21   margin-top: -1px;        /* 上側にあるタブと1pxだけ重ねるために「-1px」を指定 */
22   padding: 1em;            /* 内側の余白量 */
23   display: none;
24}
25.tabbody div:first-of-type {
26  display: block;
27}
28
29/* ▼タブの配色 */
30.a { background-color: #ffffdd; }
31.b { background-color: #ddffdd; }
32.c { background-color: #ddddff; }
33</style>
34<body>
35<p class="tabcontrol">
36   <a href="#tabpage1" class="a">タブ1</a>
37   <a href="#tabpage2" class="b">タブ2</a>
38   <a href="#tabpage3" class="c">タブ3</a>
39</p>
40<div class="tabbody">
41   <div id="tabpage1" class="a">…… タブ1の中身 ……</div>
42   <div id="tabpage2" class="b">…… タブ2の中身 ……</div>
43   <div id="tabpage3" class="c">…… タブ3の中身 ……</div>
44</div>
45
46<p class="tabcontrol">
47   <a href="#tabpage4" class="a">タブ4</a>
48   <a href="#tabpage5" class="b">タブ5</a>
49   <a href="#tabpage6" class="c">タブ6</a>
50</p>
51<div class="tabbody">
52   <div id="tabpage4" class="a">…… タブ4の中身 ……</div>
53   <div id="tabpage5" class="b">…… タブ5の中身 ……</div>
54   <div id="tabpage6" class="c">…… タブ6の中身 ……</div>
55</div>
56
57<script>
58function handler (event) {
59  let e = event.target, r, t, p;
60  if (r = /^#(.+)$/.exec (e.getAttribute ('href',2)))
61    if (t = document.getElementById (r[1]))
62      p = t.parentNode,
63      p.insertBefore (t, p.firstChild),
64      event.preventDefault ();
65}
66
67document.addEventListener ('click', handler, false);
68
69</script>