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