Jqueryで特定のタブが開いた状態でページ遷移をする方法。

2024年5月14日2024年6月19日

ページ遷移した時に特定のタブが開いた状態にしたい。

今回はURLのハッシュ値を使って、画面遷移時に特定のタブを開いた状態にする方法を紹介します。

実装方針

まずは実装方針の確認です。

①まずは該当のリンクのURLの末尾にハッシュ値を振り分けます

ゴール：ページ遷移した際に末尾に#tab_panel-[数値]とついていること。

②ページ遷移した際に、URLからハッシュ値を取得します

ゴール：console.logでハッシュ値(#以降)が取得できていること。

③そのハッシュ値と順番が一致するタブとコンテンツに、is-openクラスを付与する。

ゴール：test-2なら2番目のタブとコンテンツが開いていること。

次章から詳しく解説します。

該当のリンクのURLの末尾にID(数値)を振り分ける

<ul class="test">
  <li class="test__list">
    <a href="./test.html#tab_panel-1">テスト１</a>
  </li>
  <li class="test__list">
    <a href="./test.html#tab_panel-2">テスト２</a>
  </li>
  <li class="test__list">
    <a href="./test.html#tab_panel-3">テスト３</a>
  </li>
</ul>

今回は#tab_panel-数値　というフラグメントをつけています。

これにより、各リンクをクリックした際に一意のフラグメントを取得することができます。

実際にページ遷移をすると、URLの末尾に#tab_panel-[数値]が付いているはずです。

ページ遷移した際に、URLからハッシュ値を取得

次にページ遷移した際にURLからハッシュ値を取得します。

目的は、「tab_panel-数値」を取得して、数値のみを変数に格納すること。

ここはjsで実装します

function onLoadTabChange() {
  var hash = location.hash;
 console.log("ハッシュ値", hash); //後で消すこと
  hash = (hash.match(/^#tab_panel-\d+$/) || [])[0];
  if (hash !== undefined) {
    var tabnumber = hash.slice(11);
　　 console.log("数値のみ", tabnumber); //後で消すこと
  } else {
    var tabnumber = "tab_panel-1";
  }
}

onLoadTabChange();

・location.hashでハッシュ値を取得。→ex) test.html#tab_panel-1ならば「tab_paner-1」を取得できる。

・(hash.match(/^#tab_panel-\d+$/) || [])[0];でハッシュ値が指定の形式と一致しているかを判別している。

tab_panel-数値という形式でない場合は、何も処理をしない。

形式と一致する場合は、ハッシュ値を変数に格納。

/^#tab_panel-\d+$/←これは正規表現という、特定の文字列を検索する仕組みを使っている。この記述で0~9までの数値が必ず一回はある。という表現になる。

・var tabname = hash.slice(11);←文字列の11番目、つまり数値だけを切り取る。

ここまでのjsの記述で、URLのハッシュ値から数値だけを切り取るという挙動が達成できる。

console.logの部分で下記の画像のように出力されていたら実装完了です。

ハッシュ値と順番が一致するタブとコンテンツにis-activeクラスをつける

ここまでで変数「tabname 」には数値が格納されています。

この章での目標は、取得した数値と同じ順番にあるタブとコンテンツにis-activeをつけることです。

function onLoadTabChange() {
  var hash = location.hash;
  hash = (hash.match(/^#tab_panel-\d+$/) || &#91;])&#91;0];

  if (hash !== undefined) {
    var tabnumber = hash.slice(11);
  } else {
    var tabnumber = "tab_panel-1";
  }
   //ここから追記
  var tabno = tabnumber - 1;
  $(".tab__button").removeClass("is-active");
  $(".tab__content").removeClass("is-active");
  $(".tab__button").eq(tabno).addClass("is-active");
  $(".tab__content").eq(tabno).addClass("is-active");

}

onLoadTabChange();

・.tab__buttonとtab__contentからデフォルトの「is-active」クラスを消す

・取得したハッシュ値と一致する順番のtab__buttonとtab__contentに「is-active」クラスをつける

.eq(tabno)←これで並列状態の要素からtabno(1~3)番目の要素を指定できる。指定した要素に対して.addClassで「is-active」を付与しています。

取得したハッシュ値の数値と、開閉されているタブの順番が一致していたら実装完了です。

以上ここまでで、ページ遷移した時に該当のタブを開いた状態にする処理を実装できます。