8192.jp
8192.jpPRODUCTWeb制作で使える便利なコード集タブで切り替え出来るコンテンツ

タブで切り替え出来るコンテンツ

2023/09/01 2023/09/02

タブによって切り替えることが出来るコンテンツを実装する際に使えるコードです。

目次

    HTML

    <div class="tab_wrap">
	<div class="tab_btn_wrap">
		<div class="tab_btn" data-target="tab_default">TAB - Default</div>
		<div class="tab_btn" data-target="tab1">TAB - 1</div>
		<div class="tab_btn" data-target="tab2">TAB - 2</div>
		<div class="tab_btn" data-target="tab3">TAB - 3</div>
	</div>
	<div class="tab_content_wrap">
		<div id="tab_default" class="tab_content">TAB Content - Default</div>
		<div id="tab1" class="tab_content">TAB Content - 1</div>
		<div id="tab2" class="tab_content">TAB Content - 2</div>
		<div id="tab3" class="tab_content">TAB Content - 3</div>
	</div>
</div>
    .tab_wrap全体を囲うラッパー
    .tab_btn_wrapタブ全体を囲うラッパー
    .tab_btnタブ部分
    .tab_content_wrapコンテンツを囲うラッパー
    .tab_contentコンテンツ部分
    #tab_defaultデフィルトで開いておくタブ
    注意点

    タブのdata-target="◯◯"には、対応したタブのidを指定してください。

    また、タブの数・文字数が多すぎる場合、ブラウザの幅によっては文字の改行が発生して見栄えが少し悪くなるので注意。

    JavaScript

    document.addEventListener("DOMContentLoaded", function() {
	var defaultTabContent = document.querySelector("#tab_default");
	var defaultTabButton = document.querySelector(".tab_btn[data-target='tab_default']");

	defaultTabContent.style.display = "block";
	defaultTabButton.classList.add("active");

	var tabButtons = document.querySelectorAll(".tab_btn");
	tabButtons.forEach(function(tabButton) {
		tabButton.addEventListener("click", function() {
			var target = this.getAttribute("data-target");

			var tabContents = document.querySelectorAll(".tab_content");
			tabContents.forEach(function(tabContent) {
				tabContent.style.display = "none";
			});

			var allTabButtons = document.querySelectorAll(".tab_btn");
			allTabButtons.forEach(function(button) {
				button.classList.remove("active");
			});

			var selectedTabContent = document.querySelector("#" + target);
			selectedTabContent.style.display = "block";
			this.classList.add("active");
		});
	});
});

    jQuery版

    jQueryを使用する場合はこちらです。

    $(document).ready(function() {
	$("#tab_default").show();
	$(".tab_btn[data-target='tab_default']").addClass("active");
	$(".tab_btn").click(function() {
		var target = $(this).data("target");
		$(".tab_content").hide();
		$("#" + target).show();
		$(".tab_btn").removeClass("active");
		$(this).addClass("active");
	});
});

    CSS

    色やサイズ等はサイトに合わせて適宜変更してください。

    .tab_wrap{
	width: 80vw;
	max-width: 640px;
	margin: 30px auto;
}
.tab_btn_wrap{
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.tab_btn{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 1px;
	margin-bottom: 1px;
	padding: 10px 10px 6px;
	border-bottom: 4px solid #fff;
	background: #fff;
	cursor: pointer;
	transition: 0.3s;
}
.tab_btn.active{
	border-bottom: 4px solid #086CB8;
}
.tab_btn:last-of-type{
	margin: 0 0 1px 0;
}
.tab_btn:not(.active):hover{
	border-bottom: 4px solid #ddd;
}
.tab_content_wrap{
	background: #fff;
}
.tab_content_wrap{
	padding: 10px;
	line-height: 1.6;
}
.tab_content{
	display: none;
}

    実際の動作

    See the Pen Untitled by Leo_8192 (@Leo_8192) on CodePen.

    関連記事

    PR