[jQuery]別ページから特定のタブにダイレクトリンクする方法


[jQuery]別ページから特定のタブにダイレクトリンクする方法


[jQuery]別ページから特定のタブにダイレクトリンクする方法

jQueryを使うと簡単にタブを実装することができます。しかし、ただタブを作るだけではなく、他ページから任意のタブにアクセスしたい・・・なんて事はありませんか?
例えばタブが3つ並んでいる場合に、他ページから遷移して2番目のタブをアクティブにしたい・・・等。
今回は、jQueryを使用して特定のタブにダイレクトリンクする方法をまとめてみました。

スポンサーリンク

[jQuery]別ページから特定のタブにダイレクトリンクする方法 [サンプル]

ここではリンク元ページをtab.html、タブページをtab2.htmlとしています。
tab.htmlにあるhrefの「#」以下を取得して、リンクに応じたタブを表示させる方法を記述します。

デモページはこちらです。
デモページはこちら
2016/04/07[追記]:ダイレクトリンクではなく、特定のタブをアクティブにするだけが良い場合はこちらの記事をご参考までに。

リンク元(tab.html)のHTML

リンク先(tab2.html)のHTML

リンク先(tab2.html)のCSS

CSSはデザインに基づいて記述して下さい。参考までに当サンプルのCSSはこちら。

jQuery 通常のタブ

ダイレクトリンクを使用しない通常のタブは下記のように作成する事ができます。

ここまででこんなタブができます。

  • Tab1
  • Tab2
  • Tab3
  • これはTab1の内容です
  • これはTab1の内容です
  • これはTab1の内容です
  • これはTab1の内容です

これはTab2の内容です。これはTab2の内容です。これはTab2の内容です。これはTab2の内容です。これはTab2の内容です。これはTab2の内容です。

これはTab3の内容です
Free Repeat Patterns

jQuery ダイレクトリンク

他ページ、あるいはページ内リンクなどから特定のタブをアクティブにしたい場合は、下記の方法があります。
2015/05/05[追記]:sliceの部分でIEでエラーが発生するとのご連絡を頂き、一部修正しました。
2015/05/29[追記]:13行目の記述修正。hashに要素がない場合は1つ目のtabがアクティブになるように記述。

詳しく見ていきましょう。
4行目で変数hashにリンク先のurlのアンカーを取得しています。#tab1とか#tab2とか。

location.hash・・・URLの「#」以降を取得

6行目で、アンカーにtab~の文字が含まれているかチェック。無い場合は、hashに渡しません。
この部分Yahoo!知恵袋を参考にさせて頂きました。

続いて変数tabnameに6行目で取得したhashの#から後の文字を代入します。tab1とかtab2とかになります。
【20150505/追記】9行目のif文を追記しました。hashに要素が存在する場合は、#から後の文字をsliceします。
このif文が無いと、遷移前のページでエラーがでます。(当環境ではIE8以下のみ)
【20150529/追記】hashに要素がない場合は、1つ目のタブがアクティブになるように変数tabnameにtab1を代入しています。

slice・・・指定範囲のものを切り出す

20行目でリンク元URLとタブを紐づけています。
タブに指定したidがtabnameと一致するものを取得しています。
そして最後に一致しているタブの中身を表示させて、タブにselectクラスを付けてアクティブ状態にします。
動作確認をし、問題なければ完成です!

他にも方法はあるので、作成するコンテンツに合わせて検討してみて下さい!
以下に参考リンクをご紹介します。

躓いたら教えて貰おう!

コードエラーにはまるとあっという間に時間が経ちますよね。何が悪いのか見つけるもの一苦労。
フリーランスの人や社内に聞ける人がいない!ピンチ!な人は外部サービスを使ってみては如何でしょうか。今は便利なサービスが沢山ありますよ。
ストアカ」は教える側・教えられる側にもなれるサービスです。大手セミナーサイトには載っていないレア先生がいるかも!?私は統計学のセミナーを受けたことがあるのですが、アットホームで生徒との距離が近く感じました。アットホームと言いつつも博士号を持った先生だったので、内容も満足!
単発受講可能なセミナーも多いので気になる講座があれば足を運んでみて下さい。

自宅学習派の人は「TechAcademy [テックアカデミー]」、「世界最大級のオンライン学習サイトUdemy」などのサービスから合うものを選んでみて下さい。
テックアカデミーはWordpressやアプリコースの他、WEBデザインコースもあります。
UdemyはWEBやPG系に限らず趣味的な講座もあります。また、Udemyは受講料のセール(?)があり、タイミングが合えばお目当ての講座を安く受けれるかも!?ストアカと同じく、講師側にも興味がある人は登録しとくといいですよ。夢の講師デビューはすぐそこっ!
社内の技術力を底上げしたいとお考えの企業には「企業向けプログラミング研修【CodeCamp】」という手もあります。
学び方も多様化していて便利ですねー。


和風デザイン勉強会