他のページからのアクセス時に特定のタブを表示する方法。

WEBサイトを独学で作っている為、初心者なのでご教授して頂けませんでしょうか。
リンクをクリックすると、別ページの特定タブを開いた状態にしようとしております。
質問の仕方が至らない箇所もあるかと思いますが、宜しくお願い申し上げます。

下記がリンク元です。
3番目のtab3を表示させようとしております。

現状は、リンク元をクリックするとtab1が表示されてしまっています。

<p>新商品詳細<a href="sample.html#tab3">新商品詳細</a></p>

こちらがタブが設置された、リンク先です。

<html lang="ja-JP">
<body>
<div class="container" id="Biography01">		
	<section id="vertical_tab_nav" class="clearfix">
      <ul>
        <li id="tab1"><a href="#panel1">SUBSCRIPTION</a></li>
        <li id="tab2"><a href="#panel2">SINGLE</a></li>
        <li id="tab3"><a href="#panel3">ALBUM</a></li>
        <li id="tab4"><a href="#panel4">REVIVAL CD</a></li>
        <li id="tab5"><a href="#panel5">DVD/Blu-ray</a></li>
        <li id="tab6"><a href="#panel6">OTHER</a></li>
      </ul>

      <div class=disco-box>
        <article id="panel1" class="panel">
          <p>タブ1の内容</p>
        </article>
          
        <article id="panel2" class="panel">
          <p>タブ2の内容</p>   
        </article>

        <article id="panel3" class="panel">
          <p>タブ3の内容</p>
        </article>        
      
        <article id="panel4" class="panel">
          <p>タブ4の内容</p>
        </article>

        <article id="panel5" class="panel">
          <p>タブ5の内容</p>
        </article>

        <article id="panel6" class="panel">
          <p>タブ6の内容</p>
        </article>
      </div>
    </section>
  </div>  
  

<!-- JavaScript Libraries -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>

<script>
$(document).ready(function(){               

  //----------Select the first tab and div by default
  
  $('#vertical_tab_nav > ul > li > a').eq(0).addClass( "selected" );
  $('#vertical_tab_nav > div > article').eq(0).css('display','block');

  //---------- This assigns an onclick event to each tab link("a" tag) and passes a parameter to the showHideTab() function
      
    $('#vertical_tab_nav > ul').click(function(e){
      
      if($(e.target).is("a")){
      
        /*Handle Tab Nav*/
        $('#vertical_tab_nav > ul > li > a').removeClass( "selected");
        $(e.target).addClass( "selected");
        
        /*Handles Tab Content*/
        var clicked_index = $("a",this).index(e.target);
        $('#vertical_tab_nav > div > article').css('display','none');
        $('#vertical_tab_nav > div > article').eq(clicked_index).fadeIn();
        
      }
      
        $(this).blur();
        return false;
      
    });
    
   
});//end ready
</script>
</body>
</html>