コーディングメソドロジー

第54回 ページ遷移後に任意のタブを開くjavascript

「タブ切り替え」のjavascriptは非常に多くのサイトで活用されておりますが、今回は「タブ切り替え」の応用編としてページ遷移後にあらかじめ開いておきたいタブを任意で選択できるようにするjavascriptをご紹介します。

(1)タブ切り替えを実装する
まずは、実装ソースを見ていきましょう。01)htmlソースと02)タブ切り替えに必要なjavascriptは下記の通りです。

02の「※1」の部分がキーとなるソースです。
「※1」のソースを解説致します。まず、URLを取得し、パラメータ「?」以降の文字列を切り出します。
ex:「http://coding-factory.com/test.html?tab02」の場合、「tab02」のみを切り出しています。

次に、静的に設定していたクラス「tabDefault current」を一度取り除き、切り出した「tab02」を活用し、クラス「tab02」に対してクラス「tabDefault current」を新たに付与し、tabswitchを実行しています。これにより、「tab02」のタブが初めから開くようにすることができます。

(2)リンクの設定の仕方
(1)でのhtmlソースとjavascriptだけではまだうまく動きません。リンク元のページでの設定を行う必要があります。
(1)のタブがあるページへのリンクの記述は下記の03の通りです。

見ていただくとわかるようにhrefの中に「test.html?tab02」という記述があります。
これは「ファイル名+?+開きたいタブのクラス名」になっています。

(1)で解説した通り、?以降の文字列で開きたいタブを判定していますので、ここをtab03、tab04のように設定するだけで任意のタブを開くことができるようになります。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム