[jQuery] 別ページから特定のタブにダイレクトリンクさせたい（タブパネルは複数あり）

Question

html + cssコーダーです。
初めてこちらを利用させていただきます。
説明足らずな点、失礼な点がありましたら申し訳ございません。

現状

ネットで得た情報にて、複数のタブパネルを設置しています。
以下コードは tab.html に記述しているものとします。

<ul class="tabs">
  <li id="tab01" class="tab active"><a href="#cont01">タブ01</a></li>
  <li id="tab02" class="tab"><a href="#cont02">タブ02</a></li>
  <li id="tab03" class="tab"><a href="#cont03">タブ03</a></li>
</ul>
<ul class="panels">
  <li id="cont01" class="panel active">タブ01の内容</li>
  <li id="cont02" class="panel">タブ02の内容</li>
  <li id="cont03" class="panel">タブ03の内容</li>
</ul>

<ul class="tabs">
  <li id="tab04" class="tab active"><a href="#cont04">タブ04</a></li>
  <li id="tab05" class="tab"><a href="#cont05">タブ05</a></li>
  <li id="tab06" class="tab"><a href="#cont06">タブ06</a></li>
</ul>
<ul class="panels">
  <li id="cont04" class="panel active">タブ04の内容</li>
  <li id="cont05" class="panel">タブ05の内容</li>
  <li id="cont06" class="panel">タブ06の内容</li>
</ul>
 
<script>
 $(function () {
  $(".tabs a").on('click', function(e) {
    e.preventDefault();
    var target = $(this).attr('href');
    if (! $(target).length) return false;
    $('.tab', $(this).closest('.tabs')).removeClass('active');
    $(this).closest('.tab').addClass('active');
    $('.panel', $(target).closest('.panels')).removeClass('active');
    $(target).addClass('active');
  });
});
</script>

さらに実現したいこと

tab.html とは別の、index.html などに下記コードなどを記述し、
クリックすると、タブが開いた状態の該当箇所に遷移させたいです。

<ul>
    <li><a href="tab.html#tab01">このリンクはTab1に飛びます。</a></li>
    <li><a href="tab.html#tab02">このリンクはTab2に飛びます。</a></li>
    <li><a href="tab.html#tab03">このリンクはTab3に飛びます。</a></li>
    <li><a href="tab.html#tab04">このリンクはTab4に飛びます。</a></li>
    <li><a href="tab.html#tab05">このリンクはTab5に飛びます。</a></li>
    <li><a href="tab.html#tab06">このリンクはTab6に飛びます。</a></li>
</ul>

タブパネルが単独の場合は色々方法はありそうでしたが、
複数の場合の解決方法がわからずご質問させていただきました。

色々試してみましたが、なにぶんjavascriptの知識がほぼ無いため
何をどうしたらいいかもうわからず、助けていただきたい次第です。

初歩的な質問とは存じますが、何卒お力お貸しください。。

Answer 1

  var target = $(document.location.hash);
  if (target.length && target.hasClass('panel')) {
    $('.tab a[href="#' + target.prop('id') + '"]').trigger('click');
  }

最後の }); の直前に

Comments

[vermontcurry]

ご回答ありがとうございました。
以下の通り、ご教示いただいた箇所に設置いたしましたが
目的のタブは開きませんでした m(__)m

$(function () {
$(".tabs a").on('click', function(e) {
e.preventDefault();
var target = $(this).attr('href');
if (! $(target).length) return false;
$('.tab', $(this).closest('.tabs')).removeClass('active');
$(this).closest('.tab').addClass('active');
$('.panel', $(target).closest('.panels')).removeClass('active');
$(target).addClass('active');
});

var target = $(document.location.hash);
if (target.length && target.hasClass('panel')) {
$('.tab a[href="#' + target.prop('id') + '"]').trigger('click');
}

});

[x_x]

#tab02 ではなく #cont02 へリンクを張ってみてください。

[vermontcurry]

ありがとうございます！！！

おかげさまでリンク先を「contXX」にすることで
タブを開いた状態で表示させることができました！！

ただ、それらが下の方にある場合
タブは開いてはいますが、画面のスクロールまではできていない状態です。

可能であればそちらもご教示いただけますでしょうか。
厚かましいお願いで申し訳ございません m(__)m

[x_x]

いくつか方法がありますが、簡単なのは .scrollIntoView() です。
https://developer.mozilla.org/ja/docs/Web/API/Element/scrollIntoView

この回答では .trigger('click'); でクリック以降の処理を既存の処理に任せてしまっていますので、それを利用して書けます。
$(target).addClass('active')[0].scrollIntoView();
既存処理を変えたくない場合は .trigger('click'); の後に
target[0].scrollIntoView();
とすればいいでしょう。

[vermontcurry]

早々のご回答誠にありがとうございます！！

お陰様で思い通りの挙動を実現させることができました（涙）
こちらベストアンサーとさせていただき、本件クローズとさせていただきます。

この度は本当に助かりました。重ねてお礼申し上げます。