[jQuery]パラメータを利用して別ページから特定のタブをアクティブにする方法

[jQuery]別ページから特定のタブにダイレクトリンクする方法」で、他ページから特定のタブへダイレクトリンクする方法をご紹介しました。
今回は、ダイレクトリンクの機能は無く、特定のタブをアクティブにする方法をご紹介します。

[jQuery]パラメータを利用して別ページから特定のタブをアクティブにする方法 [サンプル]

アンカーなしで、タブアクティブのみという事です。
ここではリンク元ページをtab.html、タブページをtab2.htmlとしています。
tab.htmlにあるhrefのパラメータを取得して、リンクに応じたタブを表示させる方法を記述します。

デモページはこちらです。
デモページはこちら

リンク元(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 パラメータから特定のタブをアクティブにする

他ページから遷移し、特定のタブをアクティブにしたい場合は、下記の方法があります。
記事冒頭でも書きましたが、該当タブにアンカーでリンクしたい時は、こちらの記事をどうぞ。

詳しく見ていきましょう。
3行目で変数urlにリンク先のurlを取得しています。~tab.html?no=tab1とか。

location.href・・・URLの取得

5行目で、パラメータ「?no=tab~」が含まれているかチェック。無い場合は、urlに渡しません。
続いて取得したURLを「?」で分割し、変数paramsに代入します。「~tab.html」とパラメータ「no=tab~」になります。
更に9行目で、「no=tab~」をイコールの前後で分割しています。no=tab1だったら「no」と「tab1」に分割されます。

split・・・指定箇所で分割する

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

パラメータの指定で下記サイト参考にさせて頂きました。

5 Comments

だるまや

すみません。自己解決しました。
コードをよく確認もせず、質問してしまい大変失礼致しました。

返信する
いろはクロス

だるまやさん

コメントありがとうございます。
無事解決されたようで良かったです!

返信する
だるまや

お世話になります。

こちらの記事を参考にしてサイトの組み込んだところ動くことに動いたのですが、
一つ問題が発生していて困っています。
ご教授願えませんでしょうか。

問題ですが、ページリンクから遷移して来たときには、任意のタブのコンテンツを表示するのですが、
その後、ページのタブをクリックしても反応がありません。
私の組み込みかたがわるかったのでしょうか?

お手数ですが、ご返事いただけたら幸いです。
よろしくお願い申し上げます。

返信する
森下

いろはクロス様

お世話になっております!
こちらの記事、拝見しました。
実装したところ、思い通りの結果でした!
本当に有難うございます。

こちらの勘違いのコメントに実際にスクリプト書いていただいて
感激しております。

今後は実装の際にぜひこちらを活用させて頂きます。
この任意のタブをアクティブにした状態にリンク、ということをする機会が度々発生すると思いますので
今後はここで悩まなくていいと思うと本当にありがたいです。。
今までも散々探し歩いていたので。

お忙しい中、わざわざありがとうございました。
また、このように自由にスクリプトを操れてほんとうに羨ましいです!
今後もこちらで勉強させて頂きます。

本当にありがとうございました。

返信する
いろはクロス

森下様
コメントありがとうございます。即席で作ってみましたが、上手く動いて良かったです!はい、またいつでもご利用下さい。お役に立てて嬉しいです^^

返信する

コメントを残す