<!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.