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

[ ID : 12295 ]
シルバー
【Vanilla.js】遷移元からのアンカー付リンク ( hashタグありリンク ) で遷移後にタブ切り替え
実装目安
3分

概要

遷移元から所定のアンカーリンク(ハッシュタグを付与されたURL)で遷移してきた場合に、対応するタブをカレント状態にする処理のvanilla.jsでの実装。

用途・要件

  • 他のページ(遷移元)から特定のアンカーリンクで遷移してきた場合、ページをロード時に対応するタブをカレントにする。

仕様

  • トリガーとなるタブの親に.js-tab-trigger-scope、タブに.js-tab-trigger付与する。
  • タブ切り替えの対象となるコンテンツの親に.js-tab-target-scope、.js-tab-targetを付与する。

注意事項

  • デフォルトで表示させておくタブとコンテンツにそれぞれ.is-currentを初期値で付与しておくこと。
  • 本ページデモ(iframe)での挙動向けにparent.location.hashとしているため、実際に使用する場合はlocation.hashに変更してご使用ください。

検証ブラウザ

  • Google Chrome(最新)
  • Microsoft Edge(最新)
  • Firefox(最新)
  • Safari(最新)

実装

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

この記事をシェアする

関連記事

全ての記事を見る

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