[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クラスを付けてアクティブ状態にします。
動作確認をし、問題なければ完成です!

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



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

  1. 初めまして。こちらのタブの動作・デザイン共に気に入って是非使わせていただきたいのですが、一つ、お伺いしたいことがあります。

    任意のタブにリンクを貼って遷移した場合、
    例えば、#tab2を選んでリンクすると、
    ページ内アンカーとしても動作してしまいます。

    タブの切替のみに動いて欲しいのですが、
    何か方法がありますでしょうか・・・?

    • 森下様
      コメントありがとうございます。
      すいません、どのようなものを作ろうとされているのかよく分からないのですが・・・ダイレクトリンクは不要という事でしょうか。
      でしたら、記事中「jQuery 通常のタブ」に記載の方法でダイレクトリンクは無いタブを作成することができます。

      >ページ内アンカーとしても動作してしまいます
      →「ダイレクトリンク」版はそのような意図で作成しております。他ページから遷移した際に、該当のタブの箇所まで「ダイレクトにリンク」する方法ですので・・。

      • いろはクロス様

        早々のご返信ありがとうございます!
        私はダイレクトリンクは、任意のタブを開いた状態にしたページにリンクできる、という意味だと思ってました!
        はじめの段階で違っていましたね^^;
        申し訳ありません。

        私がやりたいのは、任意のタブを開き、しかし位置はページトップから開きたいので、アンカー機能はないほうがありがたいのですが
        こちらのスクリプトではそういう実装は出来ないでしょうか・・・・?

        • 森下様

          そうだったのですね、こちらの説明不足すいません;;
          本コードはアンカーが非常に重要で、アンカーを外すとタブも機能しなくなってしまいます。お役に立てず申し訳ないです。。。

          • 色はクロス様

            こちらこそ、申し訳ありません。
            ご返信、ありがとうございました!

          • いろはクロス様

            名前が変な変換になってしまいました…
            重ね重ねすみません!

            この度はご丁寧な返信をいただきまして
            本当にありがとうございました!

  2. はじめまして。
    とても便利で理想的なタブのため、活用させていただいています。

    「ダイレクトリンク」用を使用しているのですが、
    ページをアクセスした際のデフォルトが、
    tab1~3の場合、tab3が表示されるのですが、
    tab1(1番目)を表示させることは可能なのでしょうか。

    • happy_sunny様

      コメント&ご指摘ありがとうございます!
      1つ目のタブがアクティブになるように修正しました。

      ソースの13行目、「hashに要素がなければ初期化」としていましたが、1つ目のtabがアクティブになるように、「 要素が存在しなければtabnameにtab1を代入する」としました。

      var tabname = “tab1”;

      これで1つ目のタブが表示されると思います!

  3. はじめまして。とても便利そうなので、ぜひ実装してみたいと思ったのですが、ie10以下で「未定義または NULL 参照のプロパティ’slice’は取得できません」のエラーが発生します。解決方法はありますでしょうか。

    • sudo様
      ご返信遅くなり申し訳ありません。
      確認したところ、当環境でもIE8以下で同様のエラーとなっておりました・・。
      ですので、記事修正しましたのでご確認くださいませ。
      sliceの前にif文を追加しています。
      エラー発生の原因としては、
      遷移前のページ(jquery_tabsample.html)ではURLに#tab1などのアンカーはありません。そのため、遷移前の時点では変数hashに値が入っていない。NULLの状態となっています。

      ですので、sliceしようにもできませんよーというエラーになっておりました。逆に遷移後のページではこのエラーは発生していなかったはずです。

      遷移前のページでエラーが出ないように、「hashに要素がある場合は~」と条件をつける為にif文を加えました。
      これで当環境ではご連絡頂いたエラーは出なくなりました。解決策になっていれば幸いです。

Leave a Reply

Your email address will not be published.


*


CAPTCHA