【タブメニュー】コンテンツをフェードインで表示

プラグインを使用せず、自作でレスポンシブのタブメニューを実装します。タブの切り替えでコンテンツをフェードインして表示する動作になります。

htmlのコードは下記になります。
タブのliタグにはtab1、tab2、tab3と連番でidを付与します。またページ表示時に選択状態のタブにはclass=”selected”を付与します。コンテンツのdivタグにはclass=”tab_panel”を付与します。

<ul id="tab_menu">
	<li id="tab1" class="selected"><img src="arrow.png" alt="">タイトル01</li>
	<li id="tab2"><img src="arrow.png" alt="">タイトル02</li>
	<li id="tab3"><img src="arrow.png" alt="">タイトル03</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: 12px 0 8px;
	margin: 0 1px 0 0;
	text-align: center;
	list-style: none;
	cursor: pointer;
	color: #fff;
	background: #ccb591;
	font-size: 125%;
}
#tab_menu li:last-child {
	margin-right: 0;
}
#tab_menu li.selected {
	background: #b79662;
}
#tab_menu li:hover {
	background: #b79662;
}
#tab_menu li img {
	display: inline-block;
	vertical-align: middle;
	position: relative;
	bottom: 2px;
	padding: 13.5px .4em 13.5px 0;
}

最後にjQueryのコードです。
ページ表示時はクラス名selectedのタブが何番目のタブか調べ、変数index01へ代入します。次にコンテンツを一度全て非表示にし、クラス名selectedのタブと同じ順番のコンテンツをフェードインで表示します。
タブ切り替え時はクリックされたタブが何番目のタブか調べ、変数index02へ代入します。次にコンテンツを一度全て非表示にし、クリックされたタブと同じ順番のコンテンツをフェードインで表示します。最後にタブのliタグのclass=”selected”を削除し、クリックされたタブのliタグのみにclass=”selected”を付与します。

$(function() {
	$('#tab_menu li').click(function() {
		var index02 = $('#tab_menu li').index(this);
		$('.tab_panel').css('display','none');
		$('.tab_panel').eq(index02).fadeIn();
		$('#tab_menu li').removeClass('selected');
		$(this).addClass('selected');
	});
	var index01 = $('#tab_menu li.selected').index();
	$('.tab_panel').css('display','none');
	$('.tab_panel').eq(index01).fadeIn();
});