[tab_panel.html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trasitional//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="tab_panel.js"></script>
<link rel="stylesheet" href="tab_panel.css" type="text/css" />
<title>タブパネル</title>
</head>
<body>
<div id="container">
<ul class="tab">
<li>prototype.js</li>
<li>script.aculo.us</li>
<li>jQuery</li>
<li>YUI</li>
</ul>
<ul class="panel">
<li>代表的なJavaScript ライブラリの中でも歴史が古く、最も普及しているJavaScript ライブラリです。</li>
<li>prototype.js と同時に利用するアニメーションなどのEffect処理に特化した JavaScript ライブラリです。</li>
<li>jQuery は、非常に軽量なJavaScript ライブラリです。</li>
<li>YUI は、非常に多彩な機能を持つ JavaScript ライブラリです。</li>
</ul>
</div>
</body>
</html>
[tab_panel.css]
* {
margin: 0;
padding: 0;
list-style-type: none;
}
div#container {
margin: 10px auto;
width: 500px;
}
ul.tab li {
float: left;
padding: 4px 10px;
cursor: pointer;
background: #ddd;
border: 1px solid #999;
margin-right: 1px;
position: relative;
top: 1px;
}
ul.tab li.selected {
border-bottom: 1px solid #eee;
background: #eee;
}
ul.panel li {
clear: both;
background: #eee;
border: 1px solid #999;
padding: 10px;
}
[tab_panel.js]
$(function() {
$(".tab li:first-child").addClass("selected");
$(".panel li:not(:first)").css("display","none");
$(".tab li").click(function() {
$(".tab li").removeClass("selected");
$(this).addClass("selected");
$(".panel li").css("display","none");
$(".panel li:eq("+$(".tab li").index(this)+")").css("display","block");
});
});