特定のタブコンテンツを開きたい

Question

別ページから、特定のタブコンテンツを開きたいです。

ワードプレスで会社HPを作成しております。
その中で、複数タブ切り替えのあるページがあるのですが、
他ページから特定のタブに飛びたいです。

現状の仕様として、
・JQueryでクリックすると「active」がつき、クリックしたタブが開く

  $('.tabcontent > div').hide();
  $('.tabnav a').click(function () {
    $('.tabcontent > div').hide().filter(this.hash).fadeIn();
    $('.tabnav a').removeClass('active');
    $(this).addClass('active');
    return false;
  }).filter(':eq(0)').click();

・リンク元にパラメータを追加して特定のタブコンテンツを開く
＜参考サイト＞
https://techmemo.biz/javascript/tab-direct-link/

上記サイト通り記述し、ページへの移動はできたのですが、タブコンテンツが消えてします。

・パラメータを変更

<a href="<?php echo esc_url(home_url()); ?>/TABPAGE?id=tab1"></a>

・下記サイトを参考にJQueryを追記

$(function() {
  //URL取得とチェック
  var url = location.href;
  url = (url.match(/?id=tab\d+$/) || [])[0];
 
  //取得したURLを「?」で分割
  var params = url.split("?");
 
  //params内のデータを「=」で分割
  var tab = params[1].split("=");
 
  //tab内のデータをtabnameに格納
  if($(tab).length){
    var tabname = tab[1];
  } else{
    var tabname = "tab1";
  }
 
  //コンテンツ非表示&タブを非アクティブ
  $('.tabs .panel').hide();
  $('.tabs a').removeClass('active');
 
  //何番目のタブかを格納
  var tabno = $('.tabs li#' + tabname).index();
 
  //コンテンツ表示
  $('.tabs .panel').eq(tabno).fadeIn();
 
  //タブのアクティブ化
  $('.tabs a').eq(tabno).addClass('active');
});
</script>
コード

■下記が、現状HTMLです

        <!-- タブボタン -->
        <ul class="tabnav l-container">
          <li id="tab1"><a href="#tab01">TAB01</a></li>
          <li id="tab2"><a href="#tab02">TAB02</a></li>
          <li id="tab3"><a href="#tab03">TAB03</a></li>
          <li id="tab4"><a href="#tab04">TAB04</a></li>
        </ul>
      </div>

<div class="tabcontent">
　<div id="tab01" class="tabcontent__inner panel">
　<div id="tab02" class="tabcontent__inner panel">　、、、、
</div>

Answer 1

if($(tab).length){

↓

if($('#'+tab[1]).length){

 or

if(tab.length){

では？

Comments

[mahomet]

ご回答ありがとうございます。
上記ご回答でもうまく反応しませんでした。

もしお手隙でしたら、下記現状から誤った箇所などお教えいただけますでしょうか。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

【HTML】
<div class="border">
<!-- タブボタン -->
<ul class="tabnav l-container">
<li id="tab1"><a href="#tab01">TABボタン1</a></li>
<li id="tab2"><a href="#tab02">TABボタン2</a></li>
・・・</ul>
</div>
<div class="tabcontent">
<!-- TAB内容 -->
<div id="tab01" class="tabcontent__inner panel">TAB1</div>
<div id="tab02" class="tabcontent__innerr panel">TAB2</div>
・・・</div>

<!-- リンク -->
<li><a href="<?php echo esc_url(home_url()); ?>/TABPAGE?id=tab1">TAB1へのリンク</a></li>

【Jquery】
//tab
$('.tabcontent > div').hide();
$('.tabnav a').click(function () {
$('.tabcontent > div').hide().filter(this.hash).fadeIn();
$('.tabnav a').removeClass('active');
$(this).addClass('active');
return false;
}).filter(':eq(0)').click();

//特定タブへのリンク
$(function() {
//URL取得とチェック
var url = location.href;
url = (url.match(/?id=tab\d+$/) || [])[0];

//取得したURLを「?」で分割
var params = url.split("?");

//params内のデータを「=」で分割
var tab = params[1].split("=");

//tab内のデータをtabnameに格納
if($(tab).length){
var tabname = tab[1];
} else{
var tabname = "tab1";
}

//コンテンツ非表示&amp;タブを非アクティブ
$('.tabs .panel').hide();
$('.tabs a').removeClass('active');

//何番目のタブかを格納
var tabno = $('.tabs li#' + tabname).index();

//コンテンツ表示
$('.tabs .panel').eq(tabno).fadeIn();

//タブのアクティブ化
$('.tabs a').eq(tabno).addClass('active');
});
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

お忙しい中恐縮ですがよろしくお願いいたします。

[KazuhiroHatano]

console.logで各所で意図通りでないところを調べましょう