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

2016/04/07 2018/05/23

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

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

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

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

リンク元(tab.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>

<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>

リンク先(tab2.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>

</ul>

<li>これはTab1の内容です</li>

</ul>

</div>

<p>これはTab2の内容です。これはTab2の内容です。これはTab2の内容です。これはTab2の内容です。これはTab2の内容です。これはTab2の内容です。</p>

</div>

<p>これはTab3の内容です<br>

</p>

</div>

</div>

リンク先(tab2.html)の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;}

.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;}

jQuery 通常のタブ

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

$(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')
	});
});

$(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')

});

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

Tab1
Tab2
Tab3

これはTab1の内容です
これはTab1の内容です
これはTab1の内容です
これはTab1の内容です

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

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

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

$(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');
});

$(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');

});

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

var url = location.href;

1	var url = location.href;

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

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