【jQuery】タブメニューを簡単な実装方法でご紹介します

シンプルなタブメニューの実装方法をご紹介します。

タブメニューのサンプルをご覧ください

タブメニューをクリックすると、中身の要素が入れ替わるのが確認できたと思います。
今回は上記のタブメニューについて解説していきます。

HTMLの記述

<div class="container">
	<ul class="tab">
		<li class="active">パスタ</li>
		<li>カレー</li>
		<li>サラダ</li>
	</ul>
	<ul class="content">
		<li class="active">
			<p>トマトソース</p>
			<p>ミートソース</p>
			<p>クリームソース</p>
		</li>
		<li>
			<p>キーマカレー</p>
			<p>チキンカレー</p>
			<p>ラムカレー</p>
		</li>
		<li>
			<p>シーザーサラダ</p>
			<p>マリネサラダ</p>
			<p>コブサラダ</p>
		</li>
	</ul>
</div>

メニューを切り替えするボタンは、ulタグに「tab」というクラスが記載されているところです。
中身のコンテンツ部分は、ulタグに「content」というクラスが記載されています。

最初に表示されているデフォルト値（上記サンプルでは「パスタ」の項目）には、「active」というクラスを付与しておきます。
このクラスが付与されることで、コンテンツの要素を表示したり、メニューの背景色を付けたりしています。

CSSの記述

.container{
	padding: 20px;
}
.tab{
	display: flex;
	justify-content: space-between;
}
.tab li{
	width: 33%;
	font-weight: bold;
	padding: 20px;
	border: 2px solid #000;
	border-bottom: none;
	box-sizing: border-box;
	cursor: pointer;
}
/*クラスに「active」が付与されたときの指定*/
.tab li.active{
	background: #ccc;
}
.content{
	padding: 20px;
	border: 2px solid #000;
}
/*通常時は「display: none;」で非表示にしておく*/
.content li{
	display: none;
}
.content li p{
	background: #ccc;
	padding: 20px;
	margin: 10px 0;
}
/*クラスに「active」が付与されたとき「display: block;」で表示する*/
.content li.active{
	display: block;
}

「active」クラスが付与されたときのプロパティに注目してください。
タブメニューに「active」が付くと背景色が変わります。
中身のコンテンツは、デフォルトでは「display: none;」で非表示にしていますが、「active」が付くと「display: block;」が有効になり、要素を表示することができます。

JSの記述

$(function(){
	var tab = $('.tab > li'),
      	content = $('.content > li');

  tab.on('click',function(){
    //何番目のメニューがクリックされたのか、番号を取得する
    var idx = tab.index($(this));
    //「active」クラスを削除して、取得した番号と一致する要素に「active」クラスを付与する
		tab.removeClass("active").eq(idx).addClass("active");
    //「active」クラスを削除して、取得した番号と一致する要素に「active」クラスを付与する
		content.removeClass("active").eq(idx).addClass("active");
	});
});

主に上記コードで行っていることは、要素に「active」クラスを付与したり削除したりしています。
ポイントとなるのが「tab.index($(this));」で、タブの何番目がクリックされたのか取得しているところです。

HTMLコードをもう一度確認してみましょう。
「tab」クラスの直下に「li」タグは3つあります。また「content」クラスの直下に「li」タグは3つあります。

要するに「tab」クラス直下の2番目の「li」タグがクリックされたら、「content」クラス直下の2番目の「li」タグに「active」クラスが付与され、表示されているということです。

タブメニューの数と、中身のコンテンツの数を揃えておくことで、実装することができます。
コピペでも使うことができますので、是非利用してみてください！