ナビゲーションやページ内外からタブ内にリンクさせたい

前提・実現したいこと

ページ内外からページ内のタブへリンクさせたいのですが、思うような動きになりません。
（リンク後はそのタブがアクティブになる形です）
初心者のため理解していない所の方が多いです。
ご教授いただけますと大変助かります…

デザイン上、divをまたいでの組み方をしていて、こちらのサイトを参考に作成しています。
https://blog-and-destroy.com/24218

該当のソースコード

html
1         <div class="wrap-tab-contents">
2            <div class="tab-panel">
3               <ul class="tab-group tabs">
4                  <li class="tab tab-event-list is-active">EVENT LIST</li>
5                  <li class="tab tab-event-report">REPORT</li>
6               </ul>
7            </div>
8         </div>
9         
10         <div class="tab-event-contents-container"> 
11            <div class="panel-group">
12               <div class="panel tab-event-list is-show">
13                  <div class="event">
14                    tab1
15                  </div>
16               </div>
17               <div class="panel tab-event-report">
18                  <div class="report">
19                     tab2
20                  </div>
21               </div>
22            </div>
23         </div>

script
1<script>
2   document.addEventListener('DOMContentLoaded', function(){
3      let tabs = document.getElementsByClassName('tab');
4      for(let i = 0; i < tabs.length; i++) {
5         tabs[i].addEventListener('click', tabSwitch, false);
6      }
7      function tabSwitch(){
8         document.getElementsByClassName('is-active')[0].classList.remove('is-active');
9         this.classList.add('is-active');
10         document.getElementsByClassName('is-show')[0].classList.remove('is-show');
11         tabs = Array.prototype.slice.call(tabs);
12         const index = tabs.indexOf(this);
13         document.getElementsByClassName('panel')[index].classList.add('is-show');
14      };
15   });
16</script>