<!DOCTYPE html>
<html lang="ja">
<head>
		<meta charset="utf-8">
		<title>タブ</title>
</head>
<body>
		<div id="container">
			<ul class="tab">
				<li><a href="#tab1" class="selected">サンプル1</a></li>
				<li><a href="#tab2">サンプル2</a></li>
				<li><a href="#tab3">サンプル3</a></li>
				<li><a href="#tab4">サンプル4</a></li>
				<li><a href="#tab5">サンプル5</a></li>
			</ul>
			<ul class="panel">
				<li id="tab1">
					テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
					テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
				</li>
				<li id="tab2">
					テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
					テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
					テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
				</li>
				<li id="tab3">
					テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
					テキストが入ります。
				</li>
				<li id="tab4">
					テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
					テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
				</li>
				<li id="tab5">
					テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
					テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
				</li>
			</ul>
		</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</body>
</html>
*{
	margin:0;
	padding:0;
}
#container{
	width:500px;
	margin:50px auto;
}
#container a {
	color: #000000;
	text-decoration: none;
}
ul.tab{
	display: flex;
	padding:0;
}
ul.tab li{
	list-style-type:none;
	width:100px;
	height:40px;
}
ul.tab li a{
	outline:none;
	background:#829FD9;
	display:block;
	color:blue;
	line-height:40px;
	text-align:center;
}
ul.tab li a.selected{
	background: #5C73F2;
	text-decoration:none;
	color:#333;
	cursor:default;
}
ul.panel{
	border:1px solid #9FB7D4;
	border-top:none;
	padding:0;
}
ul.panel li{
	list-style-type:none;
	padding:10px;
	color:#333;
}
$(function(){
	$("ul.panel li:not("+$("ul.tab li a.selected").attr("href")).hide() //選択されていないタブを非表示に
	$("ul.tab li a").click(function(){
		$("ul.tab li a.selected").removeClass("selected"); //selectedクラスを一旦取り除く
		$(this).addClass("selected"); //クリックされたタブにだけselectedを付与
		$("ul.panel li").hide(); //全てのパネルを一旦非表示に
		$($(this).attr("href")).show(); //クリックされたhref属性の値を取得し、その値をもつpanelを表示する
		return false;
	});
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.