【jQuery】リンク元により表示するタブを指定する方法

urlの最後に付けられるハッシュタグ（#なんちゃら）を使ってどうこうするやつ。
知ってしまえば仕組み自体結構簡単というか、なかなかどうして応用が効く。

Contents

1 20190624追記
2 はじめに
3 リンク元
4 リンク先（tab.html）
5 まとめ

20190624追記

「http://example.com/#hogehoge」じゃなくて
「http://example.com/?hoge=hogehoge」のやつでやりたいならこっち。
[jQuery]urlのパラメータを取得して判別する

はじめに

タブの作り方は色々あるだろうしプラグインも転がってるだろうけど、
何がかち合うか分からんかったので全部自作した。

リンク元

<ul>
	<li><a href="tab.html#tab1">tab1を表示する</a></li>
	<li><a href="tab.html#tab2">tab2を表示する</a></li>
	<li><a href="tab.html#tab3">tab3を表示する</a></li>
	<li><a href="tab.html#tab4">tab4を表示する</a></li>
	<li><a href="tab.html#tab5">tab5を表示する</a></li>
</ul>

<ul>

<li><a href="tab.html#tab1">tab1を表示する</a></li>

<li><a href="tab.html#tab2">tab2を表示する</a></li>

<li><a href="tab.html#tab3">tab3を表示する</a></li>

<li><a href="tab.html#tab4">tab4を表示する</a></li>

<li><a href="tab.html#tab5">tab5を表示する</a></li>

</ul>

見たまま、遷移先urlにハッシュタグをつけとく。

リンク先（tab.html）

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<ul id="tab_btn">
	<li><a href="#tab1">tab1を表示するよ</a></li>
	<li><a href="#tab2">tab2を表示するよ</a></li>
	<li><a href="#tab3">tab3を表示するよ</a></li>
	<li><a href="#tab4">tab4を表示するよ</a></li>
	<li><a href="#tab5">tab5を表示するよ</a></li>
</ul>
<ul id="tab_info">
	<li>tab1の中身だよ</li>
	<li>tab2の中身だよ</li>
	<li>tab3の中身だよ</li>
	<li>tab4の中身だよ</li>
	<li>tab5の中身だよ</li>
</ul>

<li><a href="#tab1">tab1を表示するよ</a></li>

<li><a href="#tab2">tab2を表示するよ</a></li>

<li><a href="#tab3">tab3を表示するよ</a></li>

<li><a href="#tab4">tab4を表示するよ</a></li>

<li><a href="#tab5">tab5を表示するよ</a></li>

</ul>

<li>tab1の中身だよ</li>

<li>tab2の中身だよ</li>

<li>tab3の中身だよ</li>

<li>tab4の中身だよ</li>

<li>tab5の中身だよ</li>

</ul>

これ押したらこれが表示するよっていうのをそれぞれ作る。
jQueryに関しては上記ので動いてるけど他でどうかはわかんない。
ハッシュタグについての注意として、同一のidは振らないように。
idと関連付けするとページ内リンクが発動するからこの場合あまり幸せにならない。
それがいいならいいんだけど。
クリックした（=アクティブな）メニューは「class=”active”」を付与するんだけどjsでやるから書かなくていい。

#tab_btn li.active a{
	/* 表示してるやつに合ったメニューの装飾 */
	}

#tab_btn li.active a{

/* 表示してるやつに合ったメニューの装飾 */

}

「tab_btn」のアクティブなやつに「active」ってclassを振るのでそこだけ注意。
それ以外は自分の好きなようにclass振ったり何なりでデザイン。
表示非表示の部分は全部jsで制御するので書かなくていい。

とりあえずタブのメニューを押したときの動作はこう。

$(function(){
	$('#tab_btn li').click(function() {
		//押されたのがリストの何番目か調べる
		var index = $('#tab_btn li').index(this);
		//表示領域を全部非表示にする
		$('#tab_info li').hide();
		//押されたのと同じ番目のを表示する
		$('#tab_info li').eq(index).fadeIn();
		//.activeがついてるのを外す
		$('#tab_btn li').removeClass('active');
		//押したやつにactiveを付与してる
		$(this).addClass('active');
	});
});

$(function(){

$('#tab_btn li').click(function() {

//押されたのがリストの何番目か調べる

var index = $('#tab_btn li').index(this);

//表示領域を全部非表示にする

$('#tab_info li').hide();

//押されたのと同じ番目のを表示する

$('#tab_info li').eq(index).fadeIn();

//.activeがついてるのを外す

$('#tab_btn li').removeClass('active');

//押したやつにactiveを付与してる

$(this).addClass('active');

});

なんていうかhtmlの作り的にはaを指定すりゃいいんだろうけど、これで動いてるし文字数減っていいかなって。

で、今回一番肝になるページ遷移時の動作はこう

$(function(){
	//ハッシュタグ読み込み
	var hash = location.hash;
	if(hash.length){
	//ハッシュがあったら
		if(hash.match(/#tab/)){
		//ハッシュタグが「#tab◯」ってなってたら
			//表示領域を全部非表示にする
			$('#tab_info li').hide();
			//メニューに付いてる「class="active"」を削除
			$('#tab_btn li').removeClass('active');
			//「#tab◯」を「◯」だけにする
			var tabname = hash.slice(4.1);
			//「n番目を表示する」ってのをやりたいんだけど、
			//順番は0から始まるので「#tab1」は「0」、「#tab2」は「1」になる
			//なのでそのままだといっこ多くなっちゃうから1を引く
			tabname = tabname - 1;
			//n番目の内容を表示する
			$('#tab_info li').eq(tabname).fadeIn();
			//n番目のメニューに「class="active"」を付与する
			$('#tab_btn li').eq(tabname).addClass('active');
		}else{
		//ハッシュタグが「#tab◯」じゃなかったら
			//1番目のメニューに「class="active"」を付与する
			$('#tab_btn li').eq(0).addClass('active');
			//内容部分を全部非表示にする
			$('#tab_info li').hide();
			//1番目の内容を表示する
			$('#tab_info li').eq(0).fadeIn();
		}
	}else{
	//ハッシュがなかったら（普通にページ開いたときとか）
		//1番目のメニューに「class="active"」を付与する
		$('#tab_btn li').eq(0).addClass('active');
		//内容部分を全部非表示にする
		$('#tab_info li').hide();
		//1番目の表示内容を表示する
		$('#tab_info li').eq(0).fadeIn();
	}
});

$(function(){

//ハッシュタグ読み込み

var hash = location.hash;

if(hash.length){

//ハッシュがあったら

if(hash.match(/#tab/)){

//ハッシュタグが「#tab◯」ってなってたら

//表示領域を全部非表示にする

$('#tab_info li').hide();

//メニューに付いてる「class="active"」を削除

$('#tab_btn li').removeClass('active');

//「#tab◯」を「◯」だけにする

var tabname = hash.slice(4.1);

//「n番目を表示する」ってのをやりたいんだけど、

//順番は0から始まるので「#tab1」は「0」、「#tab2」は「1」になる

//なのでそのままだといっこ多くなっちゃうから1を引く

tabname = tabname - 1;

//n番目の内容を表示する

$('#tab_info li').eq(tabname).fadeIn();

//n番目のメニューに「class="active"」を付与する

$('#tab_btn li').eq(tabname).addClass('active');

}else{

//ハッシュタグが「#tab◯」じゃなかったら

//1番目のメニューに「class="active"」を付与する

$('#tab_btn li').eq(0).addClass('active');

//内容部分を全部非表示にする

$('#tab_info li').hide();

//1番目の内容を表示する

$('#tab_info li').eq(0).fadeIn();

}

}else{

//ハッシュがなかったら（普通にページ開いたときとか）

//1番目のメニューに「class="active"」を付与する

$('#tab_btn li').eq(0).addClass('active');

//内容部分を全部非表示にする

$('#tab_info li').hide();

//1番目の表示内容を表示する

$('#tab_info li').eq(0).fadeIn();

}

});

普通何もしてない状態なら一番最初のやつ見せるから、そのように指定してる。
今気づいたけどタブ数超えたハッシュタグついたときの処理してないや。
まあそこはコーダーのミスか物好きがurlいじった時でもなきゃ気にするところではないけれど。

まとめ

一部ガチャガチャしてる気がするけど動くからいいやで終了。
#が何だったらどうするって処理は全部js上でやるので、そのルールに則るんなら何書いてもいいっていうね。
こういうののやつだったら数字に落とし込めるようにした方がいいけど。

応用すればフォームのselectの指定とかできるよなとか、配列的な感じにすれば複数のトリガーにできるよなとか。
とっくのとうに誰かやってるだろうけど、思った。