【jQuery】タブメニューを作ってみよう

目次

タブメニューとは

タブメニューとは、様々なコンテンツをタブで切り替えて表示できる機能です。例えば、カテゴリーごとにコンテンツがいくつかあり、それを全部表示するとサイトが縦長になったり、不用意に場所を取ってしまったりすることがあります。こういったときに使えるのがタブメニューで、ブログなどで記事をカテゴリー別に分けて表示するのはよくある例かと思います。

タブメニューの基本的な作り方

下のコードが、タブメニューを作るときに必要な基本的なHTMLです。一つ目のul要素はタブ、2つ目のulはタブに対応したコンテンツになっています。

<div class="tab-menu">
	<ul class="tab">
		<li class="tab-active">タブ1</li>
		<li>タブ2</li>
		<li>タブ3</li>
	</ul>
	<ul class="tab-content">
		<li>
			<p>コンテンツ1</p>
		</li>
		<li>
			<p>コンテンツ2</p>
		</li>
		<li>
			<p>コンテンツ3</p>
		</li>
	</ul>
</div>

↓タブメニューではどれか1つのコンテンツだけを表示しておくので、それ以外をCSSで非表示にしておきます。

.tab-content > li:not(:first-child) { /* デフォルトでは最初のコンテンツのみを表示 */
	display: none;
}

↓jQueryで書くコードは以下が基本になります。removeClassとaddClassでは、クリックしたタブにだけtab-activeクラスが付くようになっています。これは、今どのタブが選択されているかを分かりやすくするために、アクティブなタブにだけ新たなクラスを付けて、CSSで違ったデザインを施すためのコードです。その他のコードは、表示するコンテンツを切り替えるためのものです。

$(".tab li").click(function() {
	var index = $(".tab li").index(this); //クリックしたタブのインデックス番号を変数indexに代入
	$(".tab li").removeClass("tab-active"); //タブの装飾
	$(this).addClass("tab-active"); //タブの装飾
	$(".tab-content > li").hide(); //全てのコンテンツを一旦隠す
	$(".tab-content > li").eq(index).show(); //クリックしたタブに対応するコンテンツを表示
});

この例ではタブやコンテンツの装飾はしていませんが、デザイン次第でいろいろな雰囲気が出せるので、自由にCSSを設定してみてください。

タブメニューのサンプル

今回は、上の画像のように、選択中のタブのborder-bottomがなくなるタブメニューのコードを紹介します(もちろん、このまま使っても、いろいろデザインを変えて使ってもらっても構いません)。

<div class="tab-menu">
	<ul class="tab">
		<li class="tab-active"><span class="border-w"></span>タブ1</li>
		<li><span></span>タブ2</li>
		<li><span></span>タブ3</li>
	</ul>
	<ul class="tab-content">
		<li>
			<p>コンテンツ1</p>
		</li>
		<li>
			<p>コンテンツ2</p>
		</li>
		<li>
			<p>コンテンツ3</p>
		</li>
	</ul>
</div>
.tab-menu {
	border: 1px solid black;
	width: 450px;
	height: 200px;
}

.tab li {
	float: left;
	width: 150px;
	padding: 10px 0;
	border-right: 1px solid black;
	border-bottom: 1px solid black;
	box-sizing: border-box;
	text-align: center;
	cursor: pointer;
}

.tab li:last-child {
	border-right: none;
}

.tab li:not(.tab-active) { /* 選択されていないタブの装飾 */
	background-color: #E6E6E6;
	transition: all .5s;
}

.tab li:not(.tab-active):hover {
	background-color: #FAFAFA;
}

.tab-active {
	position: relative;
}

.border-w { /* 選択中のタブのborder-bottomを隠すためのクラス */
	position: absolute;
	bottom: -2px;
	left: 0;
	height: 3px;
	width: 100%;
	background-color: white;
}

.tab-content {
	clear: left;
	padding: 20px;
}

.tab-content > li:not(:first-child) { /* デフォルトでは最初のコンテンツのみを表示 */
	display: none;
}
$(".tab li").click(function() {
	var index = $(".tab li").index(this); //クリックしたタブのインデックス番号を変数indexに代入
	$(".tab li").removeClass("tab-active"); //タブの装飾
	$(this).addClass("tab-active"); //タブの装飾
	$(".tab li span").removeClass("border-w"); //タブの装飾(ボーダーを消す)
	$(this).children("span").addClass("border-w"); //タブの装飾(ボーダーを消す)
	$(".tab-content > li").hide(); //全てのコンテンツを一旦隠す
	$(".tab-content > li").eq(index).show(); //クリックしたタブに対応するコンテンツを表示
});

特筆すべき点としては、空のspanタグにクラスを付け外しして、border-bottomを隠したり表示したりしています。ちなみにborder-bottomの値を変えているわけではなく、border-bottomの上に白い要素を重ねているだけです。

また、tab-activeクラスが付いていないタブにtransitionを指定し、タブにホバーしたときに背景色がゆっくりと切り替わるようにしています。

タブメニューはCSSのデザイン次第でいろいろなものができるので、基本的な仕組みを理解したら、自由にCSSをいじっていろいろなタブメニューを作ってみるといいでしょう。