<div class="container">
<div class="tab">
				<ul class="tab_menu clearfix">
					<li class="tab_menu_item"><a href="#" data-id="about" class="tab_menu_item_link is-active">About</a></li>
					<li class="tab_menu_item"><a href="#" data-id="works" class="tab_menu_item_link">Works</a></li>
					<li class="tab_menu_item"><a href="#" data-id="contact" class="tab_menu_item_link">Contact</a></li>
				</ul>
				<div class="tab_container">
					<div class="tab_content is-active" id="about">
						<p>About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About</p>
					</div>
					<div class="tab_content" id="works">
						<p>Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works</p>
					</div>
					<div class="tab_content" id="contact">
						<p>Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact</p>
					</div>
				</div>
			</div>
</div>
body {
	font-size: 14px;
	line-height: 1.5;
	color: #333;
}
a {
	text-decoration: none;
	color: #333;
}
img {
	vertical-align: bottom;
}
.clearfix {
	display: table;
	clear: both;
}
.container {
	width: 400px;
	margin: 0 auto;
	padding: 50px 0;
	background: #fff;
}
.tab_menu {
	width: 100%;

	&_item {
		float: left;
		margin-right: 2px;
		text-align: center;

		&:last-child {
			margin-right: 0;
		}

		&_link {
			display: block;
			width: 100px;
			padding: 10px;
			background: #fff;
			border-radius: 5px 5px 0 0;
			border: 1px solid #888;
			border-bottom: none;
			box-sizing: border-box;
			color: #888;
			transition: .3s;
			
			&:hover,
			&.is-active {
				background: #888;
				color: #fff;
			}
		}
	}
}
.tab_container {
	border: 1px solid #888;
}
.tab_content {
	padding: 20px;
	display: none;

	&.is-active {
		display: block;
		animation: fade 0.5s ease;
	}
}

@keyframes fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
(function() {
	'use strict';
	
	var tabMenus,
			tabContents;
	// document.querySelectorAllでマッチしたclass名を持つ要素を取得
	tabMenus = document.querySelectorAll('.tab_menu_item_link');
	tabContents = document.querySelectorAll('.tab_content');
	
	// 取得した要素は配列のようなオブジェクトを保持しているため、
	// 要素の数の分だけループ処理をして値を取り出す
	for (var i = 0; i < tabMenus.length; i++) {
		// タブメニュークリック時
		tabMenus[i].addEventListener('click', function(e) {
			// リンクの無効化
			e.preventDefault();
			
			// すべてのタブメニューを非アクティブにする
			for (var i = 0; i < tabMenus.length; i++) {
				tabMenus[i].className = 'tab_menu_item_link';
			}
			// クリックしたタブメニューをアクティブにする
			this.className = 'tab_menu_item_link is-active';
			
			// タブコンテンツを非アクティブにする
			for (var i = 0; i < tabContents.length; i++) {
				tabContents[i].className = 'tab_content';
			}
			// タブメニューdata属性値と等しいid値を持つタブコンテンツを表示させる
			document.getElementById(this.dataset.id).className = 'tab_content is-active';

		});
	}
}());

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.