【jQuery】タブメニュー （aタグ使用の場合）

※ 当サイトではアフィリエイト広告を利用しています。

タブをクリックするとコンテンツが入れ替わるタブメニュー。サイト制作時には必ずと言ってもいいほど使いますよね。

サンプルはこちら。

HTMLはこちら。

<div class="container">

        <ul id="js-tab">
          <li><a href="#a">タブ1</a></li>
          <li><a href="#b">タブ2</a></li>
          <li><a href="#c">タブ3</a></li>
        </ul>

        <div class="tabContents">
	　<div class="tabContent" id="a">
            <p>タブ1のコンテンツがここに入ります。テキストテキストテキスト。</p>
          </div>
          <div class="tabContent" id="b">
            <p>タブ2のコンテンツがここに入ります。テキストテキストテキスト。</p>
          </div>
          <div class="tabContent" id="c">
            <p>タブ3のコンテンツがここに入ります。テキストテキストテキスト。</p>
          </div>
        </div>

#js-tab li aのリンク先が、表示させたい.tabContentのidになります。

cssはサンプルのものです。実装にあわせて調整してくださいね。

.container{
	max-width: 800px;
	width: 100%;
	padding:0 3%;
	margin: 100px auto;
}
#js-tab{
	display: flex;
	margin-bottom: 50px;
}
#js-tab li{
	width: 33.3333%;
	height: 60px;
	line-height: 60px;
	background: #000;
	border-right: #fff solid 1px;
}
#js-tab li:last-child{
	border-right: none;
}
#js-tab li a{
	display: block;
	color: #fff;
	text-align: center;
	width: 100%;
	height: 100%;
	transition: 0.3s;
}
#js-tab li a:hover{
	background: #999;
}
.tabContent{
	display: none;/*tabContentは全部非表示にしておく*/
}
.tabContent p{
	text-align: center;
}

jsはこちら。

$(function() {
	$('.tabContent:first').show();//tabContentの最初のものを表示
	$('#js-tab li a:first').addClass('active');//タブメニューの最初のものにactiveを付与
	
	$('#js-tab li a').click(function() {
			$('#js-tab li a').removeClass('active');//今ついているタブメニューのactiveを削除
			$(this).addClass('active');//選択したタブメニューにactiveを付与
			$('.tabContent').hide();//tabContentを全部非表示に
			$($(this).attr('href')).fadeIn();//選択したタブメニューのリンク先のtabContentをフェードイン
			return false;
	});
});