タブ切り替え　メニューボタンからタブメニューをアクティブにしたい

前提・実現したいこと

Jqueryにてタブ切り替えのページを作成しています。
コンテンツ自体の動作に問題はないのですが、
各タブ切替の要素が表示されるように上部・下部にナビメニューを設置しており、
そこからも切替えれるように設定したいと思っております。
ご教授願います。

発生している問題・エラーメッセージ

上部・下部にメニューを設置しており、
そこからも切替えれるように設定したつもりでしたが、
メニューから切り替えると要素は切り替わるのですが、
タブ自体がactive付加されず、選択状態に表示されません。

該当のソースコード

Codepen上で再現しています。
リンク内容

HTML
1<body id="works">
2  <div id="wrapper">
3    <div id="header" class="clearfix">
4      <div class="gnavi">
5        <ul id="menu">
6          <li class="w"><a href="#">トップメニュー</a>
7            <ul class="menu__second-level">
8              <li id="stab1"><a href="#panel1">AAA</a></li>
9              <li id="stab2"><a href="#panel2">BBB</a></li>
10              <li id="stab3"><a href="#panel3">CCC</a></li>
11            </ul>
12          </li>
13        </ul>
14      </div>
15    </div>
16
17    <div id="container">
18      <div id="contentArea">
19
20        <div id="tabs">タブメニュー
21          <ul class="tab clearfix">
22            <li id="tab1"><a href="#panel1" class="active">AAA</a></li>
23            <li id="tab2"><a href="#panel2">BBB</a></li>
24            <li id="tab3"><a href="#panel3">CCC</a></li>
25          </ul>
26
27          <!----------------------------------AAA--------->
28          <div class="content">
29            <div id="panel1" class="panel">
30              <div id="aaa">
31                <h2>AAA</h2>
32                <section>
33                  AAA要素
34                </section>
35              </div>
36            </div>
37            <!----------------------------------BBB--------->
38            <div id="panel2" class="panel">
39              <div id="bbb">
40                <h2>BBB</h2>
41                <section class="">
42                  BBB要素
43                </section>
44              </div>
45            </div>
46            <!----------------------------------CCC--------->
47            <div id="panel3" class="panel">
48              <div id="ccc">
49                <h2>CCC</h2>
50                <section class="">
51                  CCC要素
52                </section>
53              </div> </div></div>  </div> </div>   </div>
54    <div id="footer">
55      <div class="fmenu clearfix">
56
57        <ul>
58          <li class="topmenu"><a href="#">ボトムメニュー</a></li>
59          <li id="sstab1"><a href="#panel1">AAA</a></li>
60          <li id="sstab2"><a href="#panel2">BBB</li>
61          <li id="sstab3"><a href="#panel3">CCC</a></li>
62        </ul>
63      </div>    </div>  </div>  </div>
64</body>
65
66</html>

Jquery
1$(function () {
2  $('a[href^="#panel"]').click(function () {
3    $("#tabs .panel").hide();
4    $("#tabs a").removeClass("active");
5    $(this).addClass("active");
6    $(this.hash).fadeIn();
7    return false;
8  });
9  //$('a[href^="#panel"]:eq(0)').trigger('click');
10});
11
12//別ページからのジャンプ用
13$(function () {
14  //リンクからハッシュを取得
15  var hash = location.hash;
16  hash = (hash.match(/^#tab\d+$/) || [])[0];
17
18  //リンクにハッシュが入っていればtabnameに格納
19  if ($(hash).length) {
20    var tabname = hash.slice(1);
21  } else {
22    var tabname = "tab1";
23  }
24
25  //コンテンツ非表示&amp;タブを非アクティブ
26  $("#tabs .panel").hide();
27  $("#tabs a").removeClass("active");
28
29  //何番目のタブかを格納
30  var tabno = $("#tabs li#" + tabname).index();
31
32  //コンテンツ表示
33  $("#tabs .panel").eq(tabno).fadeIn();
34
35  //タブのアクティブ化
36  $("#tabs a").eq(tabno).addClass("active");
37});
38

試したこと

active付加できるよう試しましたが、力不足でうまくいかず、
タブが選択状態になれば良いと思い、
activeになった時同様のcssに変更させる等してみましたが、
1度は動作したのですが、今度はタブをクリックしても動かなくなってしまいました。

下記付加して試しましたがうまくいきませんでした。

jquery
1$("#stab1 a,#sstab1 a").click(function () {
2  $("#tabs a").css({
3    "background-color": "#E5E5E5",
4    color: "#707070",
5    "font-weight": "normal"
6  });
7  $("#tab1 a").css({
8    "background-color": "#4C6884",
9    color: "#fff",
10    "font-weight": "bold"
11  });
12});
13
14$("#stab2 a,#sstab2 a").click(function () {
15  $("#tabs a").css({
16    "background-color": "#E5E5E5",
17    color: "#707070",
18    "font-weight": "normal"
19  });
20  $("#tab2 a").css({
21    "background-color": "#4C6884",
22    color: "#fff",
23    "font-weight": "bold"
24  });
25});
26$("#stab3 a,#sstab3 a").click(function () {
27  $("#tabs a").css({
28    "background-color": "#E5E5E5",
29    color: "#707070",
30    "font-weight": "normal"
31  });
32  $("#tab3 a").css({
33    "background-color": "#4C6884",
34    color: "#fff",
35    "font-weight": "bold"
36  });
37});

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

一例です。htmlもclassを追加、修正してあります。

html
1    <div id="wrapper">
2        <div id="header" class="clearfix">
3
4            <div class="gnavi">
5                <ul id="menu">
6                    <li class="w"><a href="#">トップメニュー</a>
7                        <ul class="menu__second-level">
8                            <li id="stab1"><a class="topMenu" href="#panel1">AAA</a></li>
9                            <li id="stab2"><a class="topMenu" href="#panel2">BBB</a></li>
10                            <li id="stab3"><a class="topMenu" href="#panel3">CCC</a></li>
11                        </ul>
12                    </li>
13                </ul>
14            </div>
15        </div>
16        <div id="container">
17
18            <div id="contentArea">
19
20                <div id="tabs">タブメニュー
21                    <ul class="tab clearfix">
22                        <li id="tab1"><a href="#panel1" class="active tabMenu">AAA</a></li>
23                        <li id="tab2"><a href="#panel2" class="tabMenu">BBB</a></li>
24                        <li id="tab3"><a href="#panel3" class="tabMenu">CCC</a></li>
25                    </ul>
26                    <div class="content">
27                        <div id="panel1" class="panel">
28                            <div id="aaa">
29                                <h2>AAA</h2>
30                                <section>
31                                    AAA要素
32                                </section>
33                            </div>
34                        </div>
35                        <div id="panel2" class="panel">
36                            <div id="bbb">
37                                <h2>BBB</h2>
38                                <section class="">
39                                    BBB要素
40                                </section>
41                            </div>
42                        </div>
43                        <div id="panel3" class="panel">
44                            <div id="ccc">
45                                <h2>CCC</h2>
46                                <section class="">
47                                    CCC要素
48                                </section>
49                            </div>
50                        </div>
51                    </div>
52                </div>
53            </div>
54        </div>
55        <div id="footer">
56            <div class="fmenu clearfix">
57
58                <ul>
59                    <li class="topmenu"><a href="#">ボトムメニュー</a></li>
60                    <li id="sstab1"><a class="bottomMenu" href="#panel1">AAA</a></li>
61                    <li id="sstab2"><a class="bottomMenu" href="#panel2">BBB</a></li>
62                    <li id="sstab3"><a class="bottomMenu" href="#panel3">CCC</a></li>
63                </ul>
64            </div>
65        </div>
66    </div>
67    </div>

Javascript
1        $(function () {
2                $('a[href^="#panel"]').click(function () {
3                    $("#tabs .panel").hide();
4                    $(this.hash).fadeIn();
5                    return false;
6                });
7            });
8
9            $(function () {
10                var hash = location.hash;
11                hash = (hash.match(/^#tab\d+$/) || [])[0];
12                if ($(hash).length) {
13                    var tabname = hash.slice(1);
14                } else {
15                    var tabname = "tab1";
16                }
17                $("#tabs .panel").hide();
18                
19                var tabno = $("#tabs li#" + tabname).index();
20                $("#tabs .panel").eq(tabno).fadeIn();
21
22            });
23
24            /* タブメニュー切り替え関数 */
25            const topMenu = document.getElementsByClassName("topMenu");
26            const tabMenu = document.getElementsByClassName("tabMenu");
27            const bottomMenu = document.getElementsByClassName("bottomMenu");
28
29
30            const tabChange = (elm) => {
31            for(let i=0; i<tabMenu.length;i++) {
32                elm[i].addEventListener("click", () => {
33                    for(let i = 0; i < tabMenu.length; i++) {
34                        tabMenu[i].classList.remove("active");
35                    }
36                    tabMenu[i].classList.add("active");
37                });
38            }
39            }
40
41            tabChange(topMenu);
42            tabChange(tabMenu);
43            tabChange(bottomMenu);