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

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

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

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

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

リンク元(tab.html)のHTML

[html] <ul>
<li><a href="tab2.html?no=tab1">このリンクはTab1をアクティブにします。</a></li>
<li><a href="tab2.html?no=tab2">このリンクはTab2をアクティブにします。</a></li>
<li><a href="tab2.html?no=tab3">このリンクはTab3をアクティブにします。</a></li>
</ul>
[/html]

リンク先(tab2.html)のHTML

[html] <div class="all_area">
<ul class="tab_area">
<li id="tab1" class="select">Tab1</li>
<li id="tab2">Tab2</li>
<li id="tab3">Tab3</li>
</ul>
<!– tab1 start –>
<div class="content_area">
<ul class="list_area">
<li>これはTab1の内容です</li>
<li>これはTab1の内容です</li>
<li>これはTab1の内容です</li>
<li>これはTab1の内容です</li>
</ul>
<!– /tab1 end –>
</div>
<!– tab2 start –>
<div class="content_area hide">
<p>これはTab2の内容です。これはTab2の内容です。これはTab2の内容です。これはTab2の内容です。これはTab2の内容です。これはTab2の内容です。</p>
<!– /tab2 end –>
</div>
<!– tab3 start –>
<div class="content_area hide">
<p>これはTab3の内容です<br>
<img src="tabsample.gif" width="300" height="150">
</p>
<!– /tab3 end –>
</div>
<!– /tab area end –>
</div>
[/html]

リンク先(tab2.html)のCSS

CSSはデザインに基づいて記述して下さい。参考までに当サンプルのCSSはこちら。
[css] .tab_area{
overflow:hidden;
display:table;
margin:0;
}

.tab_area li{
/*Tabの装飾*/
width:139px;
height:49px;
text-align:center;
border-right: 1px dotted #909090;
cursor: pointer;
vertical-align:middle;
display:table-cell;
color:#333333;
background-color:#ffffff;
}

.all_area {
background:#efefef;
padding:10px;
overflow: hidden;
}

.all_area div.content_area{
/*Tabの内容を表示するエリアの装飾*/
background:#ffffff;
padding:10px 10px 10px 2px;
border-top: 1px dotted #bbbbbb;
}

.tab_area li.select{
/*アクティブタブの装飾*/
background-color:#ffffff;
background-image:none;
color:#333333;
border-top:2px solid #e94545;
}

.hide{display:none;}
[/css]

jQuery 通常のタブ

ダイレクトリンクを使用しない通常のタブは下記のように作成する事ができます。
[javascript] $(function() {
//クリックしたときのファンクションをまとめて指定
$(‘ul.tab_area li’).click(function() {
//.index()を使いクリックされたタブが何番目かを調べ、
// indexという変数に代入します。
var index = $(‘ul.tab_area li’).index(this);

//コンテンツを一度すべて非表示にし、
$(‘.content_area’).css(‘display’,’none’);

//クリックされたタブと同じ順番のコンテンツを表示します。
$(‘.content_area’).eq(index).fadeIn();

//タブについているクラスselectを消し、
$(‘.tab_area li’).removeClass(‘select’);

//クリックされたタブのみにクラスselectをつけます。
$(this).addClass(‘select’)
});
});
[/javascript] ここまででこんなタブができます。

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

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

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

jQuery パラメータから特定のタブをアクティブにする

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

[javascript] $(function() {
// URLを取得
var url = location.href;
//URLチェック。パラメータが「?no=tab〜」以外の場合はデータを渡さない
url = (url.match(/\?no=tab\d+$/) || [])[0];
//取得したURLを「?」で分割。変数paramsに格納
var params = url.split("?");
//さらにparams内、0から数えて1番目のデータを「=」で分割。変数tabに格納
var tab = params[1].split("=");
//tabに要素が存在するなら、変数tab内0から数えて1番目のデータを変数tabnameに格納
if($(tab).length){
var tabname = tab[1];
} else{
// 要素が存在しなければtabnameにtab1を代入する
var tabname = "tab1";
}
//コンテンツを一度すべて非表示にし、
$(‘.content_area’).css(‘display’,’none’);
//一度タブについているクラスselectを消し、
$(‘.tab_area li’).removeClass(‘select’);
var tabno = $(‘ul.tab_area li#’ + tabname).index();
//クリックされたタブと同じ順番のコンテンツを表示します。
$(‘.content_area’).eq(tabno).fadeIn();
//クリックされたタブのみにクラスselectをつけます。
$(‘ul.tab_area li’).eq(tabno).addClass(‘select’);
});[/javascript] 詳しく見ていきましょう。
3行目で変数urlにリンク先のurlを取得しています。~tab.html?no=tab1とか。
[javascript language=”jp”] var url = location.href;
[/javascript]

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

だるまや

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

返信する
いろはクロス

だるまやさん

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

返信する
だるまや

お世話になります。

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

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

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

返信する
森下

いろはクロス様

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

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

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

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

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

返信する
いろはクロス

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

返信する

コメントを残す

メールアドレスが公開されることはありません。