大阪/梅田のホームページ制作会社 ウェブラボ関西オフィス

スタッフブログ

【jQuery】コンテンツの切り替えができるタブを作成しよう

2021/3/18 技術Memo

ホームページを見ていると、同ページ内でコンテンツを切り替え表示できる「タブ」を見たことがあると思います。カテゴリ分けされたお知らせ一覧などを思い浮かべると分かりやすいかもしれません。

今回は、jQueryを使ったタブの実装方法をご紹介します。

デモ

まずはデモをご覧ください。
ボタンをクリックすると、タブが切り替わるのが分かると思います。

SAMPLE

タブ1

タブ2

タブ3

タブ11111

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト11111

タブ22222

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト22222

タブ33333

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト33333

実装方法

HTML

<div class="tab_box">
	<div class="btn_area">
		<p class="tab_btn active">タブ1</p>
		<p class="tab_btn">タブ2</p>
		<p class="tab_btn">タブ3</p>
	</div>
	<div class="panel_area">
		<div class="tab_panel active">
			<p>タブ11111</p>
			<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト11111</p>
		</div>
		<div class="tab_panel">
			<p>タブ22222</p>
			<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト22222</p>
		</div>
		<div class="tab_panel">
			<p>タブ333333</p>
			<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト33333</p>
		</div>
	</div>
</div>

ボタン部分をbtn_area、パネル部分をpanel_areaとしています。
最初に表示しておきたいタブのボタン部分、パネル部分それぞれにactiveクラスを付けておきます。
今回はタブ1をactiveにしています。

CSS

/*タブ実装*/
.tab_box .btn_area {
	margin:0 10px;
	display: -webkit-box;
	display: flex;
}

.tab_box .tab_btn {
	width: 188px;
	padding: 8px 0;
	color: #333;
	background: #f5f7f8;
	text-align: center;
	cursor: pointer;
	transition: all 0.2s ease 0s;
}

.tab_box .tab_btn + .tab_btn {
	margin-left: 8px;
}

.tab_box .tab_btn:hover {
	background-color: #dce1e4;
}

.tab_box .tab_btn.active {
    background:#07539f;
    color:#fff;
}

.tab_box .panel_area {
    border: solid 1px #e3ebf3;
    padding: 20px;
}

.tab_box .tab_panel {
    display:none;
}

.tab_box .tab_panel.active {
    display:block;
}

ボタン部分はflexboxで横並びにしました。
ボタンが2列になる場合はflex-wrap: wrap;を付けて折り返すようにすると良いでしょう。

パネル部分はactiveクラスが付いたパネルをdisplay:blockで表示し、付いていないパネルはdisplay:noneで非表示にしておくのがポイントです。

jQuery

$('.tab_box .tab_btn').click(function() {
	var index = $('.tab_box .tab_btn').index(this);
	$('.tab_box .tab_btn, .tab_box .tab_panel').removeClass('active');
	$(this).addClass('active');
	$('.tab_box .tab_panel').eq(index).addClass('active');
});

ボタンをクリックした時のイベントを書きましょう。
$(‘.btn_area .tab_btn’).index(this)は、ページ全体の.btn_area .tab_btnの中でクリックしたボタンが何番目にあたるのか、その数を返します。
インデックスは0始まりなので、タブ1のボタンをクリックした場合は0が返ってきます。

今の時点でボタン部分とパネル部分に付いているactiveは一旦削除しましょう。
その後、クリックしたボタンのクラスにactiveを追加します。
パネルはeq(index)で要素の位置を指定できるので、先程取得したボタンのインデックスを使ってactiveクラスを追加します。

まとめ

タブはCSSだけで実装することも可能ですが、jQueryを使った実装は記述がシンプルで分かりやすいのでおすすめです。

ぜひ試してみてください。

ホームページ制作実績

大阪/梅田を拠点に、京都・奈良・滋賀・兵庫など関西圏はもちろん、 日本全国、さまざまな業種のお客様のホームページを制作しています。

制作実績一覧はこちらから

私たちについて

私たちはお客様の会社のホームページ担当として、 以下のポリシーをもってホームページ制作を行います。

少数精鋭。常に最高のチーム体制で制作します

少数精鋭。
常に最高のチーム体制で制作します

100人のお客様に100通りのプランをご提案します

100人のお客様に
100通りのプランをご提案します

常に正直に、誠実に。きちんとNOとお伝えします

常に正直に、誠実に。
きちんとNOとお伝えします

お客様の「お客様」の視点を大事にします

お客様の「お客様」の
視点を大事にします

格好いい、キレイなだけのデザインはしません

格好いい、キレイなだけの
デザインはしません

「+1」のクリエイティブにとことんこだわります

「+1」のクリエイティブに
とことんこだわります

詳しくはこちらから

スタッフブログ TOP