実践演習-タブコンテンツ - web-0127のブログ

jQuery UI

タブメニュー
ページを遷移させず複数のコンテンツを見せたい場合に利用する

tab

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery Tab</title>
<link href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<h1>Welcome to jQuery UI!</h1>

<!-- Tabs -->
<h2 class="demoHeaders">Tabs</h2>
<div id="tabs">
<ul>
<li><a href="#tabs-1">First</a></li>
<li><a href="#tabs-2">Second</a></li>
<li><a href="#tabs-3">Third</a></li>
</ul>
<div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
<div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript">
  $(function(){
    // Tabs
    $('#tabs').tabs();
    //hover states on the static widgets
    $('#dialog_link, ul#icons li').hover(
      function() { $(this).addClass('ui-state-hover'); },
      function() { $(this).removeClass('ui-state-hover'); }
    );
  });
</script>
</body>
</html>

jQuery TOOLS

タブメニュー

Build a custom set of ToolsからコアjQuery Toolsをダウンロード（または、ソースコードから必要なデータを保存する）
standalone demo をクリックして動作を確認する
http://jquerytools.org/media/img/tabs/blue.png から画像をダウンロードする

<!DOCTYPE html>
<html lang="ja">
<head>
<title>jQuery Tools Tab</title>
<link rel="stylesheet" href="css/standalone.css">
<link rel="stylesheet" href="css/tabs.css">
<link rel="stylesheet" href="css/tabs-panes.css">
</head>
<body>
<!-- the tabs -->
<ul class="tabs">
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
</ul>
<!-- tab "panes" -->
<div class="panes">
<div>First tab content. Tab contents are called "panes"</div>
<div>Second tab content</div>
<div>Third tab content</div>
</div>
<script src="js/jquery.tools.min.js"></script>
<script>
$(function() {
    $("ul.tabs").tabs("div.panes > div");
});
</script>
</body>
</html>

子セレクタ（直下セレクタ）

上位セレクタ > 下位要素セレクタ

Yetii

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タブナビ</title>
<style>
#tabBox {
	width: 500px;
	margin: 0px;
}
ul#tabBox-nav {
	list-style-type: none;
	width: 460px;
	float: left;
	margin: 0;
	background: url(img/pixel.gif) bottom left repeat-x;
}
ul#tabBox-nav li {
	margin-right: 2px;
	float: left;
}
ul#tabBox-nav a {
	float: left;
	display: block;
	padding: 4px 8px;
	border: 1px solid #ccc;
	border-bottom: 0;
	color: #666;
	background: #eee;
	text-decoration: none;
	font-weight: bold;
	outline: none;
}
ul#tabBox-nav a:hover {
	background: #fff;
}
ul#tabBox-nav a.active {
	background: #fff;
	padding-bottom: 5px;
	cursor: default;
	color: #00BF08;
}
.tab {
	width: 478px;
	clear: left;
	border: 1px solid #ccc;
	border-top: none;
	padding: 10px;
}
.gr {
	color: #00BF08;
	font-weight: bold;
}
</style>
</head>
<body>
<div id="tabBox">
<ul id="tabBox-nav">
<li><a href="#sampletab1">tab01</a></li>
<li><a href="#sampletab2">tab02</a></li>
<li><a href="#sampletab3">tab03</a></li>
<li><a href="#sampletab4">tab04</a></li>
</ul>
<div class="tab" id="sampletab1">
<p><span class="gr">tab01</span><br>に切り替わりました。</p>
</div>
<div class="tab" id="sampletab2">
<p><span class="gr">tab02</span><br>に切り替わりました。</p>
</div>
<div class="tab" id="sampletab3">
<p><span class="gr">tab03</span><br>に切り替わりました。</p>
</div>
<div class="tab" id="sampletab4">
<p><span class="gr">tab04</span><br>に切り替わりました。</p>
</div>
</div>
<script src="js/yetii-min.js"></script>
<script type="text/javascript">
  var tabber1 = new Yetii({
  id: 'tabBox'
  });
</script>
</body>
</html>

タブ切り替えパネル

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タブパネル</title>
<link href="css/style4.css" rel="stylesheet">
</head>
<body>
<div id="container">
<ul class="tab">
<li><a href="#tab1" class="selected">JavaScript</a></li>
<li><a href="#tab2">CSS</a></li>
<li><a href="#tab3">HTML</a></li>
<li><a href="#tab4">jQuery</a></li>
<li><a href="#tab5">XHTML</a></li>
</ul>
<ul class="panel">
<li id="tab1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li id="tab2">Nam cursus molestie erat,sodales erat sollicitudin ut.</li>
<li id="tab3">Pellentesque in metus leo.</li>
<li id="tab4">Vestibulum a quam scelerisque odieo.</li>
<li id="tab5">Vestibulum consequat consequat aliquet.</li>
</ul>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
	$("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide()
	$("ul.tab li a").click(function(){
		$("ul.tab li a").removeClass("selected");
		$(this).addClass("selected");
		$("ul.panel li").hide();
		$($(this).attr("href")).show();
		return false;
	});
});
</script>
</script>
</body>
</html>

@charset "utf-8";

 * {
	margin:0;
	padding:0;
}
#container {
	width:500px;
	margin:50px auto;
}
ul.tab {
	padding:0;
}
ul.tab li{
	list-style-type:none;
	width:100px;
	height:40px;
	float:left;
}
ul.tab li a {
	outline:none;
	background:url("../images/tab.jpg");
	display:block;
	color:blue;
	line-height:40px;
	text-align:center;
}
ul.tab li a.selected {
	background:url("../images/tab_selected.jpg");
	text-decoration:none;
	color:#333;
	cursor:default;
}
ul.panel {
	clear:both;
	border:1px solid #9FB7D4;
	border-top:none;
	padding:0;
}
ul.panel li {
	list-style-type:none;
	padding:10px;
	text-indent:1em;
	color:#333;
}

手順

タブパネルのHTML／XHTML（以下、HTML）は、タブ部分（見出し）とパネル部分（表示する中身）をul/li要素を使って別々にマークアップし、タブのul要素には「tab」、パネルのul要素には「panel」というclass名を付けます。

パネル部分は、タブが選択されたときに表示する内容をli要素で1つずつ記述していき（1タブ項目＝1つのli要素）、それぞれに「tab1」「tab2」……といった連番のid名を設定します。

タブ部分も同様に、タブの項目名を1つずつli要素で記述していきます。タブの項目名はa要素で包み、href属性には先ほどのパネルのid名に#を付けた値を設定します（ページ内リンクにする）。また、初期状態（ページが読み込まれた段階）で表示するタブには、a要素にclass属性「selected」を設定します。

タブコンテンツ - jQuery基本形

<div class="all">

<div class="tabSet">
<ul class="tabs">
<li><a href="#panel1-1" class="on">panel1</a></li>
<li><a href="#panel1-2">panel2</a></li>
<li><a href="#panel1-3">panel3</a></li>
<li><a href="#panel1-4">panel4</a></li>
</ul>
<div class="panels">
<div class="panel" id="panel1-1">This is panel1. This is panel1. This is panel1. This is panel1. This is panel1. This is panel1. This is panel1. This is panel1. This is panel1. This is panel1. This is panel1. This is panel1. This is panel1. This is panel1. This is panel1. This is panel1. This is panel1. This is panel1. This is panel1. This is panel1. This is panel1.  </div>
<div class="panel" id="panel1-2">This is panel2. This is panel2. This is panel2. This is panel2. This is panel2. This is panel2. This is panel2. This is panel2. This is panel2. This is panel2. This is panel2. This is panel2. This is panel2. This is panel2. This is panel2. This is panel2. This is panel2. This is panel2. This is panel2. This is panel2. This is panel2.  </div>
<div class="panel" id="panel1-3">This is panel3. This is panel3. This is panel3. This is panel3. This is panel3. This is panel3. This is panel3. This is panel3. This is panel3. This is panel3. This is panel3. This is panel3. This is panel3. This is panel3. This is panel3. This is panel3. This is panel3. This is panel3. This is panel3. This is panel3. This is panel3.  </div>
<div class="panel" id="panel1-4">This is panel4. This is panel4. This is panel4. This is panel4. This is panel4. This is panel4. This is panel4. This is panel4. This is panel4. This is panel4. This is panel4. This is panel4. This is panel4. This is panel4. This is panel4. This is panel4. This is panel4. This is panel4. This is panel4. This is panel4. This is panel4.  </div>
</div><!-- /.panels -->
</div><!-- /.tabset -->

<div class="tabSet">
<ul class="tabs">
<li><a href="#panel2-1">panel1</a></li>
<li><a href="#panel2-2">panel2</a></li>
<li><a href="#panel2-3" class="on">panel3</a></li>
<li><a href="#panel2-4">panel4</a></li>
<li><a href="#panel2-5">panel5</a></li>
</ul>
<div class="panels">
<div class="panel" id="panel2-1">This is panel1. This is panel1. This is panel1. This is panel1. This is panel1. This is panel1. This is panel1. This is panel1. This is panel1. This is panel1. This is panel1. This is panel1. This is panel1. This is panel1. This is panel1. This is panel1. This is panel1. This is panel1. This is panel1. This is panel1. This is panel1.  </div>
<div class="panel" id="panel2-2">This is panel2. This is panel2. This is panel2. This is panel2. This is panel2. This is panel2. This is panel2. This is panel2. This is panel2. This is panel2. This is panel2. This is panel2. This is panel2. This is panel2. This is panel2. This is panel2. This is panel2. This is panel2. This is panel2. This is panel2. This is panel2.  </div>
<div class="panel" id="panel2-3">This is panel3. This is panel3. This is panel3. This is panel3. This is panel3. This is panel3. This is panel3. This is panel3. This is panel3. This is panel3. This is panel3. This is panel3. This is panel3. This is panel3. This is panel3. This is panel3. This is panel3. This is panel3. This is panel3. This is panel3. This is panel3.  </div>
<div class="panel" id="panel2-4">This is panel4. This is panel4. This is panel4. This is panel4. This is panel4. This is panel4. This is panel4. This is panel4. This is panel4. This is panel4. This is panel4. This is panel4. This is panel4. This is panel4. This is panel4. This is panel4. This is panel4. This is panel4. This is panel4. This is panel4. This is panel4.  </div>
<div class="panel" id="panel2-5">This is panel5. This is panel5. This is panel5. This is panel5. This is panel5. This is panel5. This is panel5. This is panel5. This is panel5. This is panel5. This is panel5. This is panel5. This is panel5. This is panel5. This is panel5. This is panel5. This is panel5. This is panel5. This is panel5. This is panel5. This is panel5.  </div>
</div><!-- /.panels -->
</div><!-- /.tabset -->

</div>

$(function(){
	$('.tabSet').each(function(){
		var topDiv = $(this);
		var anchors = topDiv.find('ul.tabs a');
		var panelDivs = topDiv.find('div.panel');
		var lastAnchor;
		var lastPanel;
		anchors.show();
		lastAnchor = anchors.filter('.on');
		lastPanel = $(lastAnchor.attr('href'));
		panelDivs.hide();
		lastPanel.show();
		anchors.click(function(event){
			event.preventDefault();
			var currentAnchor = $(this);
			var currentPanel = $(currentAnchor.attr('href'));
			lastAnchor.removeClass('on');
			currentAnchor.addClass('on');
			lastPanel.hide();
			currentPanel.show();
			lastAnchor = currentAnchor;
			lastPanel = currentPanel;
		});
	});
});