jQuery リンク先で指定タブを開く

JavaScript

html:リンク元

<a href="<?= get_page_link( 7 ) ?>#tab2">タブ2を開いて</a>

html:リンク先

<ul class="tab_list">
  <li class="active" data-tab="tab1"><a id="tab1">タブ１</a></li>
  <li data-tab="tab2"><a id="tab2">タブ２</a></li>
</ul>

<div class="tab_content">
 <div class="ac_content active">タブ１コンテンツ</div>
 <div class="ac_content">タブ２コンテンツ</div>
</div>

jQuery

<script>
$(function () {

  // URL ページ内リンク取得
  let pram = location.hash;

  // URLのhashが＃tab2だったらタブ２を開く
  if( pram === '#tab2'){
    $('[data-tab="tab1"]').removeClass('active');
    $('[data-tab="tab2"]').addClass('active');
    $('.ac_content').toggleClass('active');
  }      

});
</script>

活用編

例えば、フォームなどをタブ切り替えで設置していた場合、確認ページも同じタブを開きたい。

html

<ul>
  <li class="active" data-tab="tab_1">
    <a id="tab_1">タブ１</a>
  </li>
  <li data-tab="tab_2">
    <a id="tab_2">タブ２</a>
  </li>
</ul>

<div>
  <div class="ac_content active">タブ１フォーム</div>           
  <div class="ac_content">タブ２フォーム</div>          
</div>

jQuery

１.aタグのhrefにid名が入るように指定する ２.hashを取得 ３.activeクラスを付与・削除

<script>
  // タブ２をクリックしたらタブ２のaタグにhrefを追加
  $('[data-tab="tab_2"]').click(function(){
    $('#tab_2').attr("href",'#tab_2');
  });

  // URL ページ内リンク取得
  let pram_recruit = location.hash;

  // URLハッシュがタブ２から来たらtab_2を開く
  if( pram_recruit === '#tab_2'){
    $('[data-tab="tab_1"]').removeClass('active');
    $('[data-tab="tab_2"]').addClass('active');
    $('.ac_content').toggleClass('active');
  }

</script>