遷移元からのアンカー付リンク ( hashタグありリンク ) で遷移後にタブ切り替え

[ ID : 3461 ]
シルバー
遷移元からのアンカー付リンク ( hashタグありリンク ) で遷移後にタブ切り替え

概要

【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に変更してご使用ください。

実装方法

コンテンツの続きを閲覧するにはログインが必要です。 新規会員登録

この記事をシェアする

新着記事

全ての記事を見る

KONOCODEのメリット 無料会員登録