概要
遷移元から所定のアンカーリンク(ハッシュタグを付与されたURL)で遷移してきた場合に、対応するタブをカレント状態にする処理の実装について。用途
- 他のページ(遷移元)から特定のアンカーリンクで遷移してきた場合、ページをロード時に対応するタブをカレントにする。
仕様
- トリガーとなるタブの親に
.js-tab-trigger-scope
、タブに.js-tab-trigger
付与する。 - タブ切り替えの対象となるコンテンツの親に
.js-tab-target-scope
、.js-tab-target
を付与する。
- jQuery v3.7.0使用。
検証ブラウザ
- Google Chrome(最新)
- Microsoft Edge(最新)
- Firefox(最新)
- Safari(最新)
注意事項
- デフォルトで表示させておくタブとコンテンツにそれぞれ
.is-current
を初期値で付与しておくこと。 - 本ページデモ(iframe)での挙動向けに
parent.location.hash
としているため、実際に使用する場合はlocation.hash
に変更してご使用ください。
実装方法
ローカル環境にコードを移設した際に動作しない場合はこちら。(トラブルシューティングページへ)