【タブメニュー】URLに応じたコンテンツ表示

同一ページ内のタブ切り替えで、タブごとに「#tab01、#tab02、#tab03」をURLに付与します。タブごとに独自のURLを持つことで、URLに応じたコンテンツを表示することができます。

htmlのコードは下記になります。
タブのliタグ内にaタグのhref属性で「#tab01、#tab02、#tab03」と連番で指定します。選択状態のタブのliタグに付与するclass=”selected”はhtmlには記述しません。ページ表示時にjQueryでURLを判別して動的に付与します。コンテンツのdivタグにはclass=”tab_panel”を付与します。

<ul id="tab_menu">
	<li id="tab1"><a href="#tab01"><img src="images/arrow.png" alt="">タイトル01</a></li>
	<li id="tab2"><a href="#tab02"><img src="images/arrow.png" alt="">タイトル02</a></li>
	<li id="tab3"><a href="#tab03"><img src="images/arrow.png" alt="">タイトル03</a></li>
</ul>
<div class="tab_panel">
	<h3>タイトル01</h3>
	<p>ダミーテキストダミーテキストダミーテキスト</p>
</div>
<div class="tab_panel">
	<h3>タイトル02</h3>
	<p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
</div>
<div class="tab_panel">
	<h3>タイトル03</h3>
	<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
</div>

続いてCSSのコードです。タブはFlexboxで横並びにしています。

#tab_menu {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 0;
	margin: 0 0 1em;
}
#tab_menu li{
	width: 33.333%;
	padding: 0;
	margin: 0 1px 0 0;
	text-align: center;
	list-style: none;
	background: #ccb591;
}
#tab_menu li:last-child {
	margin-right: 0;
}
#tab_menu li.selected {
	background: #b79662;
}
#tab_menu li:hover {
	background: #b79662;
}
#tab_menu li a {
	display: block;
	padding: 12px 0 8px;
	color: #fff;
	text-decoration: none;
	font-size: 125%;
}
#tab_menu li img {
	display: inline-block;
	vertical-align: middle;
	position: relative;
	bottom: 2px;
	padding: 13.5px .4em 13.5px 0;
}

最後にjQueryのコードです。
ページ表示時はコンテンツを一度全て非表示にします。次にlocation.hashでページのURLの#以下を調べ変数hashに代入します。そして変数hashをmatchを利用して正規表現で調べ、タブのaタグのhref属性と一致した場合は該当のタブのコンテンツをフェードインで表示します。その際、該当のタブのliタグにclass=”selected”を付与します。変数hashがaタグのhref属性に一致しなかった場合は、最初のタブが選択された処理を実行します。
タブ切り替え時はクリックされたタブのaタグのhref属性を変数thisUrlに代入します。そしてhistory.replaceStateを利用してブラウザの履歴を表示タブのURLに置き換えます。これでブラウザの戻るボタンと進むボタンに対応したページ表示ができます。この処理がないとタブ切り替え時のURLが全てブラウザに履歴として残ってしまい、戻るボタンと進むボタンが正常に機能しません。
次にクリックされたタブが何番目のタブか調べ、変数index01へ代入します。そしてコンテンツを一度全て非表示にし、クリックされたタブと同じ順番のコンテンツをフェードインで表示します。最後にタブのliタグのclass=”selected”を削除し、クリックされたタブのliタグのみにclass=”selected”を付与します。

$(function() {
	$('.tab_panel').css('display','none');
	var hash = location.hash;
	if (hash.match(/#tab01/)){
		$('.tab_panel').eq(0).fadeIn();
		$('#tab_menu li').eq(0).addClass('selected');
	} else if (hash.match(/#tab02/)){
		$('.tab_panel').eq(1).fadeIn();
		$('#tab_menu li').eq(1).addClass('selected');
	} else if (hash.match(/#tab03/)){
		$('.tab_panel').eq(2).fadeIn();
		$('#tab_menu li').eq(2).addClass('selected');
	} else {
		$('.tab_panel').eq(0).fadeIn();
		$('#tab_menu li').eq(0).addClass('selected');
	}
	$('#tab_menu li a').click(function() {
		var thisUrl = $(this).attr('href');
		history.replaceState('','',thisUrl);
		var index01 = $('#tab_menu li a').index(this);
		$('.tab_panel').css('display','none');
		$('.tab_panel').eq(index01).fadeIn();
		$('#tab_menu li').removeClass('selected');
		$(this).parent().addClass('selected');
	});
});