jQuery pluginタブ
- Advanced docking using jQuery〔複数のリストをドッキングして表示できるタブ切替メニュー〕
- Create A Tabbed Interface Using jQuery〔シンプルなタブ〕
- jQuery Tab〔コンテンツ量に応じてコンテンツの高さが可変なタブ切替コンテンツを作成する方法 〕
- jQuery Tabbed Side Menu from Queness WebBlog〔スライドアップ・ダウン効果で切り替わるタブ型スライドメニュー〕
- jQuery Tabs〔シンプルなタブ〕
- jQuery: Ein Tab-Plugin selber schreiben〔ナビゲーションを自動生成するタブ〕
- simplyTabs〔タブで画像切替〕
- zudolab jqTabContents〔タブ部分をテキストまたは画像で指定可能なタブ〕
Advanced docking using jQuery
複数のリストをドッキングして表示できるタブ切替メニュー
2009/6/6
Advanced docking using jQuery
jquery.js
jQueryを使用して、複数のタブメニューのリストをドッキングして表示する方法が掲載されています。
リストからタブ切替可能なメニューを生成します。 各タブをクリックすると、左サイドにメニューが表示されます。 そのメニューの左上にある［固定］リンクをクリックすると、現在のメニューを固定することができます。 さらに、別のタブをクリックして［固定］リンクをクリックして、というように複数のメニューを縦方向に連結して表示することができます。 ［固定］リンクをクリックした順番とは関係なく、タブの順番にしたがって連結されます。
設置イメージ設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.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-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Advanced docking using jQuery | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var docked = 0;
$("#dock li ul").height($(window).height());
$("#dock .dock").click(function(){
$(this).parent().parent().addClass("docked").removeClass("free");
docked += 1;
var dockH = ($(window).height()) / docked
var dockT = 0;
$("#dock li ul.docked").each(function(){
$(this).height(dockH).css("top", dockT + "px");
dockT += dockH;
});
$(this).parent().find(".undock").show();
$(this).hide();
if (docked > 0)
$("#content").css("margin-left","250px");
else
$("#content").css("margin-left", "60px");
});
$("#dock .undock").click(function(){
$(this).parent().parent().addClass("free").removeClass("docked")
.animate({left:"-180px"}, 200).height($(window).height()).css("top", "0px");
docked = docked - 1;
var dockH = ($(window).height()) / docked
var dockT = 0;
$("#dock li ul.docked").each(function(){
$(this).height(dockH).css("top", dockT + "px");
dockT += dockH;
});
$(this).parent().find(".dock").show();
$(this).hide();
if (docked > 0)
$("#content").css("margin-left", "250px");
else
$("#content").css("margin-left", "60px");
});
$("#dock li").hover(function(){
$(this).find("ul").animate({left:"40px"}, 200);
}, function(){
$(this).find("ul.free").animate({left:"-180px"}, 200);
});
});
</script>
<!-- CSS -->
<style type="text/css">
body { background:#f0f0f0; margin-left:60px; }
/* dock */
#dock { margin:0; padding:0; list-style:none; position:fixed; top:00px; height:100%; z-index:100; background-color:#f0f0f0; left:0; }
#dock > li {width:40px; height:120px; margin:0 0 1px 0; background-color:#f0f0f0; background-repeat:no-repeat; background-position:left center;}
#dock #links {background-image:url(/content/img/ajax/advanced_docking/links.png);}
#dock #files {background-image:url(/content/img/ajax/advanced_docking/files.png);}
#dock #tools {background-image:url(/content/img/ajax/advanced_docking/tools.png);}
#dock > li:hover {background-position:-40px 0px;}
/* panels */
#dock ul li {padding:0 5px; border:solid 1px #f1f1f1;}
#dock ul li:hover {background:#D3DAED url(/content/img/ajax/advanced_docking/item_bkg.png) repeat-x; border:solid 1px #A8D8EB;}
#dock ul li.header, #dock ul li .header:hover {background:#D3DAED url(/content/img/ajax/advanced_docking/header_bkg.png) repeat-x;border:solid 1px #F1F1F1;}
#dock > li:hover ul { display:block; }
#dock > li ul { position:absolute; top:0; left:-180px; z-index:-1; width:180px; display:none; background-color:#F1F1F1; border:solid 1px #969696; padding:0px; margin:0px; list-style:none;}
#dock > li ul.docked { display:block; z-index:-2; }
.dock,.undock{float:right;}
.undock {display:none;}
#content { margin:10px 0 0 0; }
</style>
</head>
<body>
<div id="wrap">
<!-- CODE -->
<ul id="dock">
<li id="links">
<ul class="free">
<li class="header"><a href="#" class="dock">固定</a><a href="#" class="undock">固定解除</a>Links</li>
<li><a href="#">Links - 1</a></li>
<li><a href="#">Links - 2</a></li>
<li><a href="#">Links - 3</a></li>
<li><a href="#">Links - 4</a></li>
<li><a href="#">Links - 5</a></li>
</ul>
</li>
<li id="files">
<ul class="free">
<li class="header"><a href="#" class="dock">固定</a><a href="#" class="undock">固定解除</a>Files</li>
<li><a href="#">Files - 1</a></li>
<li><a href="#">Files - 2</a></li>
<li><a href="#">Files - 3</a></li>
<li><a href="#">Files - 4</a></li>
<li><a href="#">Files - 5</a></li>
</ul>
</li>
<li id="tools">
<ul class="free">
<li class="header"><a href="#" class="dock">固定</a><a href="#" class="undock">固定解除</a>Tools</li>
<li><a href="#">Tools - 1</a></li>
<li><a href="#">Tools - 2</a></li>
<li><a href="#">Tools - 3</a></li>
<li><a href="#">Tools - 4</a></li>
<li><a href="#">Tools - 5</a></li>
</ul>
</li>
</ul><!-- #>dock -->
<div id="content">
<h1><a href='http://www.jankoatwarpspeed.com/post/2009/06/01/Advanced-docking-using-jQuery.aspx'>Advanced docking using jQuery</a> | 設置サンプル</h1>
<p>
jQueryを使用して、複数のタブメニューのリストをドッキングして表示する方法が掲載されています。
</p>
<p>
リストからタブ切替可能なメニューを生成します。
各タブをクリックすると、左サイドにメニューが表示されます。
そのメニューの左上にある［固定］リンクをクリックすると、現在のメニューを固定することができます。
さらに、別のタブをクリックして［固定］リンクをクリックして、というように複数のメニューを縦方向に連結して表示することができます。
［固定］リンクをクリックした順番とは関係なく、タブの順番にしたがって連結されます。
</p>
<p>
Praesent iaculis lectus id magna semper laoreet vel sit amet lectus. Vestibulum
purus ante, pellentesque quis fringilla a, suscipit id lectus. In ullamcorper
posuere leo, vel auctor enim placerat ac. Sed vitae hendrerit ipsum. Nam ac
nulla eget lectus sagittis suscipit. Fusce eu risus vitae elit vehicula
fermentum. Integer commodo fringilla mi, eget viverra nunc dapibus non. Sed
faucibus mi vel turpis lobortis consectetur. Donec pulvinar, erat id vulputate
tempus, leo tortor tincidunt nisl, id hendrerit sapien nibh a sapien. Morbi eu
mauris sed felis euismod semper. Pellentesque nunc mi, placerat ut faucibus nec,
suscipit ut orci. Duis eu enim risus, a dictum nunc. Ut gravida neque vel arcu
faucibus convallis. Aliquam euismod eleifend nunc at ornare. Aliquam tellus
nisl, pellentesque vitae imperdiet nec, eleifend eu augue. Integer bibendum
posuere nisl, eu vehicula orci luctus at. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean in ante sapien.
</p>
<p>
Proin mattis condimentum erat, et accumsan nunc tempus vulputate. Proin posuere
mauris ut tortor accumsan ultricies. Aenean felis purus, pretium non pretium
quis, iaculis sed erat. Donec ultrices libero eu dui tristique convallis. Fusce
risus libero, bibendum in placerat sed, hendrerit ac sem. Nulla ornare risus non
magna aliquam vehicula viverra elit tincidunt. Donec porttitor dapibus nunc sed
cursus. Sed pretium sapien ut dolor placerat at cursus ligula aliquet. Nulla
adipiscing nunc nec lacus consectetur vel gravida dui pharetra. Curabitur
pharetra odio a sapien facilisis id faucibus magna dignissim. Sed auctor porta
tellus a porttitor. Pellentesque consequat, eros in adipiscing rhoncus, arcu dui
hendrerit risus, at sodales sapien est in odio. In accumsan interdum diam, sed
congue nibh ultricies quis. Integer nec leo dolor, a porta mi. Sed adipiscing,
neque et faucibus egestas, diam orci rutrum erat, eget congue arcu purus rutrum
dolor. Nullam vel nisl non lacus pretium sodales.
</p>
<p>
Praesent eros est, varius a lobortis sed, ultricies id erat. Integer lacinia
nulla lacus, sit amet vulputate tortor. Nullam tincidunt velit at nunc pharetra
sit amet condimentum sapien ultricies. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Nunc sagittis ornare
vehicula. Vestibulum a arcu ac dui vulputate porta ac non nibh. Praesent sem mi,
faucibus vel suscipit sit amet, iaculis sit amet orci. Nunc nec mauris ante, at
eleifend felis. Aliquam quis vehicula nisi. Duis nisl urna, aliquet a
pellentesque id, vehicula semper nunc.
</p>
<p>
Curabitur eget eros imperdiet purus semper malesuada. Pellentesque vitae dui
est. Curabitur luctus commodo aliquam. Quisque ut ligula metus, id euismod
ligula. Mauris sollicitudin nisl eget odio congue vel congue est hendrerit.
Mauris eu libero ac lectus commodo sodales ut id risus. Maecenas ultricies
euismod ante, ut semper nisi lobortis pulvinar. Duis mollis velit et tortor
gravida imperdiet. Integer malesuada elit vel nibh rutrum in porta ipsum auctor.
Proin lacinia arcu nec tellus consequat ornare.
</p>
</div><!-- #content -->
<!-- / CODE -->
</div>
</body>
</html>
Create A Tabbed Interface Using jQuery
シンプルなタブ
2009/3/14
Create A Tabbed Interface Using jQuery
jquery.js、jquery-ui-personalized-1.5.2.packed.js
jQueryを使用してタブで切り替えるコンテンツを作成するjQueryプラグイン。
コンテンツ量に応じてコンテンツの高さが可変なタブ切替ウィジェット、リンクをクリックすると動画の埋め込まれたコンテンツを切り替えるタブ切替コンテンツの2つのサンプルが掲載されています。
設置イメージ：コンテンツ量に応じてコンテンツの高さが可変なタブ切替ウィジェット
設置イメージ：リンクをクリックすると動画の埋め込まれたコンテンツを切り替えるタブ切替コンテンツCreate A Tabbed Interface Using jQueryの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.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-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Create A Tabbed Interface Using jQuery | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery-ui-personalized-1.5.2.packed.js"></script>
<script type="text/javascript">
$(function(){
$('#tabvanilla > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });
$('#featuredvid > ul').tabs();
});
</script>
<!-- CSS -->
<style type="text/css">
/* 例1 */
.widget {
width:310px;
margin:20px 20px 15px 20px; padding:10px;
background:#f3f1eb;
border:1px solid #dedbd1;
}
.widget a {
color:#222;
text-decoration:none;
}
.widget a:hover {
color:#009;
text-decoration:underline;
}
.tabnav ul {
margin:0; padding:0;
list-style:none;
}
.tabnav li {
margin:0; padding:0;
list-style:none;
display:inline;
list-style:none;
}
.tabnav li a {
text-decoration:none;
color:#222;
font-weight:bold;
padding:4px 6px;
outline:none;
}
.tabnav li a:hover,
.tabnav li a:active,
.tabnav li.ui-tabs-selected a {
background:#dedbd1;
color:#222;
text-decoration:none;
}
.tabdiv {
margin-top:2px; padding:5px;
background:#fff;
border:1px solid #dedbd1;
}
.tabdiv p {
margin:10px; padding:0;
}
.tabdiv li {
list-style-image:url(/content/img/icon/color/star.gif);
margin-left:20px;
}
#post.tabdiv li {
list-style-image:url(/content/img/icon/color/arrow_next.gif);
}
.ui-tabs-hide {
display:none;
}
/* 例2 */
#featuredvid {
width:340px;
margin:0; padding:0;
text-align:center;
}
#featuredvid .fvid {
margin:10px;
}
#featuredvid .ui-tabs-nav {
margin:10px; padding:0;
}
#featuredvid .ui-tabs-nav li {
list-style:none;
margin:5px 0 0 0; padding:5px;
border:1px solid #dedbd1;
background:#fff;
text-transform:uppercase;
text-align:left;
}
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://nettuts.com/javascript-ajax/create-a-tabbed-interface-using-jquery/'>Create A Tabbed Interface Using jQuery</a> | 設置サンプル</h1>
<!-- CODE -->
<h2>コンテンツ量に応じてコンテンツの高さが可変なタブ切替ウィジェット</h2>
<div id="tabvanilla" class="widget">
<ul class="tabnav">
<li><a href="#post">Post</a></li>
<li><a href="#bookmark">Bookmark</a></li>
<li><a href="#email">E-mail</a></li>
</ul>
<div id="post" class="tabdiv">
<ul>
<li><a href="#">MySpace</a></li>
<li><a href="#">Friendster</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Orkut</a></li>
<li><a href="#">Bebo</a></li>
<li><a href="#">Tagged</a></li>
<li><a href="#">Blogger</a></li>
<li><a href="#">Hi5</a></li>
<li><a href="#">Live Spaces</a></li>
<li><a href="#">Piczo</a></li>
<li><a href="#">Freewebs</a></li>
<li><a href="#">LiveJournal</a></li>
<li><a href="#">BlackPlanet</a></li>
<li><a href="#">myYearbook</a></li>
<li><a href="#">More</a></li>
</ul>
</div><!--/post-->
<div id="bookmark" class="tabdiv">
<ul>
<li><a href="#">Google Bookmarks</a></li>
<li><a href="#">del.icio.us</a></li>
<li><a href="#">Digg</a></li>
<li><a href="#">Furl</a></li>
<li><a href="#">Facebook Share</a></li>
<li><a href="#">StumbleUpon</a></li>
<li><a href="#">Yahoo MyWeb</a></li>
<li><a href="#">Newsvine</a></li>
<li><a href="#">Reddit</a></li>
<li><a href="#">Technorati</a></li>
<li><a href="#">LiveBookmarks</a></li>
<li><a href="#">Yahoo Bookmarks</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Current TV</a></li>
<li><a href="#">Ask</a></li>
</ul>
</div><!--bookmark-->
<div id="email" class="tabdiv">
<p>important contacts:<select><option>Hotmail</option><option>Gmail</option><option>Yahoo!メール</option><option>AOL</option><option>手動</option></select></p>
<p>E-mail:<input type="text" /></p>
<p>Password:<input type="password" /></p>
<p><input type="checkbox" value="1" checked="checked" /> Remember contacts</p>
<p><input type="button" value="インポート" /></p>
</div><!--/email-->
</div><!--/widget-->
<h2>リンクをクリックすると動画の埋め込まれたコンテンツを切り替えるタブ切替コンテンツ</h2>
<div id="featuredvid" class="widget">
<div class="fvid" id="vid-1">
<object width="320" height="265"><param name="movie" value="http://www.youtube.com/v/qjNP8LErRn0&hl=ja&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/qjNP8LErRn0&hl=ja&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object>
</div>
<div class="fvid" id="vid-2">
<object width="320" height="265"><param name="movie" value="http://www.youtube.com/v/YXRH50fvHWA&hl=ja&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/YXRH50fvHWA&hl=ja&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object>
</div>
<div class="fvid" id="vid-3">
<object width="320" height="265"><param name="movie" value="http://www.youtube.com/v/rfqNXADl3kU&hl=ja&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/rfqNXADl3kU&hl=ja&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object>
</div>
<ul class="vidselector">
<li><a href="#vid-1"><span>Hamster Vacuum!</span></a></li>
<li><a href="#vid-2"><span>My hamster can not manage to stop spinning in his wheel</span></a></li>
<li><a href="#vid-3"><span>THE LEGEND of Hamster on a piano and pop corn! 5 MILLION VIEWS! THANKYOU ALL!</span></a></li>
</ul>
</div><!--/featuredvid-->
<!-- / CODE -->
</div>
</body>
</html>
jQuery Tab
コンテンツ量に応じてコンテンツの高さが可変なタブ切替コンテンツを作成する方法
2009/3/14
jQuery Tab
jquery.js
jQueryを使用して、コンテンツ量に応じてコンテンツの高さが可変なタブ切替コンテンツを作成する方法が掲載されています。 タブ切替時にコンテンツの内容がスライドアニメーション表示されます。
設置イメージFly Tabsの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.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-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>jQuery Tab | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("a.tab").click(function(){
$(".activo").removeClass("activo");
$(this).addClass("activo");
$(".contenido").hide('slow');
var muestra = $(this).attr("title");
$("#"+muestra).show('slow');
});
});
</script>
<!-- CSS -->
<style type="text/css">
ul,li { margin:0; padding:0; list-style:none; }
#contenedor { width:600px; }
#tab_contenedor { padding:8px 8px; width:300px; background:#097793; border:1px solid #000; }
#tab_contenido { padding:5px; background:#fff; }
ul.titulos { margin-top:5px; margin-bottom:6px; }
ul.titulos li { display:inline; }
ul.titulos li a { color:#097793; padding:5px 10px 6px 10px; text-transform:uppercase; background:#fff; border-bottom:1px solid #097793; }
ul.titulos li a:hover { border-bottom:1px solid #ccc; color:#ccc; }
ul.titulos li a.activo { color:#000; border-bottom:1px solid #fff; background:#fff; }
a.tab { font-weight:bold; text-decoration:none; }
.contenido p, .contenido ul { margin:10px 0; padding:0 11px; }
.contenido ul li { margin-bottom:3px; }
.contenido ul li a { color:#3f4c4f; }
.contenido ul li a:hover { color:#899fa5; }
#bookmark, #email { display:none; }
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://dl.getdropbox.com/u/363073/development/jquery/jquery-tab.html'>jQuery Tab</a> | 設置サンプル</h1>
<p>▼コンテンツ量に応じてコンテンツの高さが可変なタブ切替コンテンツ</p>
<!-- CODE -->
<div id="tab_contenedor">
<ul class="titulos">
<li><a href="#" title="post" class="tab activo">Post</a></li>
<li><a href="#" title="bookmark" class="tab">Bookmark</a></li>
<li><a href="#" title="email" class="tab">E-mail</a></li>
</ul>
<div id="tab_contenido">
<div id="post" class="contenido">
<ul>
<li><a href="#">MySpace</a></li>
<li><a href="#">Friendster</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Orkut</a></li>
<li><a href="#">Bebo</a></li>
<li><a href="#">Tagged</a></li>
<li><a href="#">Blogger</a></li>
<li><a href="#">Hi5</a></li>
<li><a href="#">Live Spaces</a></li>
<li><a href="#">Piczo</a></li>
<li><a href="#">Freewebs</a></li>
<li><a href="#">LiveJournal</a></li>
<li><a href="#">BlackPlanet</a></li>
<li><a href="#">myYearbook</a></li>
<li><a href="#">More</a></li>
</ul>
</div>
<div id="bookmark" class="contenido">
<ul>
<li><a href="#">Google Bookmarks</a></li>
<li><a href="#">del.icio.us</a></li>
<li><a href="#">Digg</a></li>
<li><a href="#">Furl</a></li>
<li><a href="#">Facebook Share</a></li>
<li><a href="#">StumbleUpon</a></li>
<li><a href="#">Yahoo MyWeb</a></li>
<li><a href="#">Newsvine</a></li>
<li><a href="#">Reddit</a></li>
<li><a href="#">Technorati</a></li>
<li><a href="#">LiveBookmarks</a></li>
<li><a href="#">Yahoo Bookmarks</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Current TV</a></li>
<li><a href="#">Ask</a></li>
</ul>
</div>
<div id="email" class="contenido">
<p>important contacts:<select><option>Hotmail</option><option>Gmail</option><option>Yahoo!メール</option><option>AOL</option><option>手動</option></select></p>
<p>E-mail:<input type="text" /></p>
<p>Password:<input type="password" /></p>
<p><input type="checkbox" value="1" checked="checked" /> Remember contacts</p>
<p><input type="button" value="インポート" /></p>
</div>
</div>
</div>
<!-- / CODE -->
</div>
</body>
</html>
jQuery Tabbed Side Menu from Queness WebBlog
スライドアップ・ダウン効果で切り替わるタブ型スライドメニュー
2009/3/28
jQuery Tabbed Side Menu from Queness WebBlog
jquery.js
jQueryを使用して、スライドアップ・ダウン効果で切り替わるタブ型スライドメニューを作成する方法が掲載されています。
コメントが充実しているので、タブ型スライドメニューを作る手順がわかりやすいです。 イベントや、各タブごとにアニメーション効果を付ける場合の手法などが参考になります。
設置イメージjQuery Tabbed Side Menu from Queness WebBlogの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.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-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>jQuery Tabbed Side Menu from Queness WebBlog | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
/* ID名がtabMenuのul要素内にあるすべてのli要素を取得 */
$('#tabMenu > li').click(function(){
/* すべてのli要素からselectedクラスを削除 */
$('#tabMenu > li').removeClass('selected');
/* 現在のli要素にselectedクラスを追加 */
$(this).addClass('selected');
/* boxBodyクラス内のすべてのdiv要素を非表示にする */
$('.boxBody div').slideUp('1500');
/* ナビゲーションのul要素のインデックスに従って、boxBody内で右のdiv要素を探す */
$('.boxBody div:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500');
}).mouseover(function() {
/* クラスの追加・削除 */
$(this).addClass('mouseover');
$(this).removeClass('mouseout');
}).mouseout(function() {
/* クラスの追加・削除 */
$(this).addClass('mouseout');
$(this).removeClass('mouseover');
});
/* bookmarkのli要素の場合は、マウスオーバー時にアニメーション効果を付ける */
$('.boxBody #bookmark li').click(function(){
//Get the Anchor tag href under the LI
window.location = $(this).find("a").attr("href");
}).mouseover(function() {
//Change background color and animate the padding
$(this).css('backgroundColor','#888');
$(this).children().animate({paddingLeft:"20px"}, {queue:false, duration:300});
}).mouseout(function() {
//Change background color and animate the padding
$(this).css('backgroundColor','');
$(this).children().animate({paddingLeft:"0"}, {queue:false, duration:300});
});
/* li要素にマウスオーバー効果を付ける */
$('.boxBody li').click(function(){
window.location = $(this).find("a").attr("href");
}).mouseover(function() {
$(this).css('backgroundColor','#888');
}).mouseout(function() {
$(this).css('backgroundColor','');
});
});
</script>
<!-- CSS -->
<style type="text/css">
body { color:#ccc; background-color:#555;}
a { color:#ccc;text-decoration:none;}
a:hover { color:#ccc;text-decoration:none}
/* tab */
#tabMenu { margin:0;padding:0 0 0 15px; list-style:none; overflow:hidden; }
#tabMenu li { float:left; display:block; height:32px; width:39px; cursor:pointer,hand; list-style:none; margin:0; padding:0; }
li.posts { background:url(/content/img/ajax/tabmenu/tabHeart.gif) no-repeat 0 -32px; }
li.bookmark { background:url(/content/img/ajax/tabmenu/tabStar.gif) no-repeat 0 -32px; }
li.email { background:url(/content/img/ajax/tabmenu/tabComment.gif) no-repeat 0 -32px; }
li.mouseover { background-position:0 0; }
li.mouseout { background-position:0 -32px; }
li.selected { background-position:0 0; }
/* box */
.box { width:227px; }
.boxTop { background:url(/content/img/ajax/tabmenu/boxTop.gif) no-repeat; height:11px; clear:both; }
*html .boxTop {margin-bottom:-2px;}
.boxBody {background-color:#282828;}
.boxBottom {background:url(/content/img/ajax/tabmenu/boxBottom.gif) no-repeat;height:11px;}
.boxBody div { display:none;}
.boxBody div.show { display:block;}
.boxBody div ul { margin:0 10px 0 25px;padding:0;width:190px;list-style-image:url(/content/img/ajax/tabmenu/arrow.gif); overflow:hidden; }
*html .boxBody div ul { margin-left:10px;padding-left:15px;}
.boxBody div li { border-bottom:1px dotted #8e8e8e; padding:4px 0;cursor:hand;cursor:pointer;}
.boxBody div ul li.last { border-bottom:none}
.boxBody div li span { font-size:8px;font-style:italic; color:#888;}
.boxBody div p { margin:0 10px 0 25px; padding:5px 0; width:190px; }
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://www.queness.com/post/106/jquery-tabbed-interfacetabbed-structure-menu-tutorial'>jQuery Tabbed Side Menu from Queness WebBlog</a> | 設置サンプル</h1>
<p>▼スライドアップ・ダウン効果で切り替えるタブ型スライドメニューです。</p>
<!-- CODE -->
<div class="box">
<ul id="tabMenu">
<li class="posts selected"></li>
<li class="bookmark"></li>
<li class="email"></li>
</ul>
<div class="boxTop"></div>
<div class="boxBody">
<div id="posts" class="show">
<ul>
<li><a href="#">MySpace</a></li>
<li><a href="#">Friendster</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Orkut</a></li>
<li><a href="#">Bebo</a></li>
<li><a href="#">Tagged</a></li>
<li><a href="#">Blogger</a></li>
<li><a href="#">Hi5</a></li>
<li><a href="#">Live Spaces</a></li>
<li><a href="#">Piczo</a></li>
<li><a href="#">Freewebs</a></li>
<li><a href="#">LiveJournal</a></li>
<li><a href="#">BlackPlanet</a></li>
<li><a href="#">myYearbook</a></li>
<li><a href="#">More</a></li>
</ul>
</div>
<div id="bookmark">
<ul>
<li><a href="#">Google Bookmarks</a></li>
<li><a href="#">del.icio.us</a></li>
<li><a href="#">Digg</a></li>
<li><a href="#">Furl</a></li>
<li><a href="#">Facebook Share</a></li>
<li><a href="#">StumbleUpon</a></li>
<li><a href="#">Yahoo MyWeb</a></li>
<li><a href="#">Newsvine</a></li>
<li><a href="#">Reddit</a></li>
<li><a href="#">Technorati</a></li>
<li><a href="#">LiveBookmarks</a></li>
<li><a href="#">Yahoo Bookmarks</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Current TV</a></li>
<li><a href="#">Ask</a></li>
</ul>
</div>
<div id="email">
<p>important contacts:<select><option>Hotmail</option><option>Gmail</option><option>Yahoo!メール</option><option>AOL</option><option>手動</option></select></p>
<p>E-mail:<input type="text" /></p>
<p>Password:<input type="password" /></p>
<p><input type="checkbox" value="1" checked="checked" /> Remember contacts</p>
<p><input type="button" value="送信" /></p>
</div>
</div>
<div class="boxBottom"></div>
</div>
<!-- / CODE -->
</div>
</body>
</html>
jQuery Tabs
シンプルなタブ
2009/3/14
jQuery Tabs
jquery.js
jQueryを使用してタブで切り替えるコンテンツを作成する方法が2つ掲載されています。
タブナビゲーションはリスト要素＋a要素でマークアップし、a要素のhref属性に<li><a href='#first'>のようにハッシュを指定します。
1つ目の例では、すべてのタブコンテンツを非表示にしておき、クリックしたa要素のハッシュを取得して、そのハッシュをIDを持つ要素だけを表示します。
2つ目の例では、タブナビゲーションの数だけ、現在のウィンドウとa要素のハッシュをそれぞれ配列に格納しておき、クリックしたa要素のハッシュを取得して、そのハッシュのIDを持つ要素だけを表示します。
例1の方がスマートな実装な気がします。
設置イメージjQuery Tabsの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.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-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>jQuery Tabs | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
/* 例1 */
// コンテンツを格納
var tabContainers = $('#exp1 > div');
$('#exp1 ul.tabnav a').click(function () {
// すべてのタブコンテンツを非表示にし、
// クリックされたハッシュをIDとするタブコンテンツだけ表示
tabContainers.hide().filter(this.hash).show();
// 選択中のタブをハイライト表示
$('#exp1 ul.tabnav a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click(); // 最初のタブコンテンツだけ表示
/* 例2 */
// パス名格納用
var tabs = [];
// ハッシュ格納用
var tabContainers2 = [];
$('#exp2 ul.tabnav a').each(function () {
// 現在のウィンドウのパス名を取得して配列に格納
// if (this.pathname == window.location.pathname) {
tabs.push(this);
// ハッシュを取得して配列に格納
tabContainers2.push($(this.hash).get(0));
// }
});
$(tabs).click(function () {
// すべてのタブコンテンツを非表示に
// クリックされたハッシュをIDとするタブコンテンツだけ表示
$(tabContainers2).hide().filter(this.hash).show();
// 選択中のタブをハイライト表示
$(tabs).removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click(); // 最初のタブコンテンツだけ表示
});
</script>
<!-- CSS -->
<style type="text/css">
:focus {
outline:0;
}
ul,
li {
margin:0; padding:0;
list-style:none;
}
#exp1,
#exp2 {
margin:0 0 20px 0; padding:0;
}
ul.tabnav {
overflow:hidden;
}
ul.tabnav li {
display:inline;
}
ul.tabnav li a {
padding:3px 7px;
background-color:#ccc;
color:#000;
text-decoration:none;
}
ul.tabnav li a.selected,
ul.tabnav li a:hover {
background-color:#666;
color:#fff;
padding-top:7px;
}
div.tabs div {
margin:0; padding:10px;
background-color:#666;
color:#fff;
}
div.tabs div h2 {
margin:10px 0;
}
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://nettuts.com/javascript-ajax/create-a-tabbed-interface-using-jquery/'>Create A Tabbed Interface Using jQuery</a> | 設置サンプル</h1>
<p>▼すべてのタブコンテンツを非表示にし、クリックされたハッシュをIDとするタブコンテンツだけ表示</p>
<!-- CODE -->
<h2>例1</h2>
<p>
すべてのタブコンテンツを非表示にしておき、クリックしたa要素のハッシュを取得して、そのハッシュをIDを持つ要素だけを表示します。
</p>
<div class="tabs" id="exp1">
<ul class="tabnav">
<li><a href="#first">タブ1</a></li>
<li><a href="#second">タブ2</a></li>
<li><a href="#third">タブ3</a></li>
</ul>
<div id="first">
<h2>タイトル1</h2>
<p>［タブ1］をクリックした時に表示される、タブコンテンツです。</p>
</div>
<div id="second">
<h2>タイトル2</h2>
<p>［タブ2］をクリックした時に表示される、タブコンテンツです。</p>
</div>
<div id="third">
<h2>タイトル3</h2>
<p>［タブ3］をクリックした時に表示される、タブコンテンツです。</p>
</div>
</div>
<h2>例2</h2>
<p>
タブナビゲーションの数だけ、現在のウィンドウとa要素のハッシュをそれぞれ配列に格納しておき、クリックしたa要素のハッシュを取得して、そのハッシュのIDを持つ要素だけを表示します。
</p>
<div class="tabs" id="exp2">
<ul class="tabnav">
<li><a href="#forth">タブ4</a></li>
<li><a href="#fifth">タブ5</a></li>
<li><a href="#sixth">タブ6</a></li>
</ul>
<div id="forth">
<h2>タイトル4</h2>
<p>［タブ4］をクリックした時に表示される、タブコンテンツです。</p>
</div>
<div id="fifth">
<h2>タイトル5</h2>
<p>［タブ5］をクリックした時に表示される、タブコンテンツです。</p>
</div>
<div id="sixth">
<h2>タイトル6</h2>
<p>［タブ6］をクリックした時に表示される、タブコンテンツです。</p>
</div>
</div>
<!-- / CODE -->
</div>
</body>
</html>
jQuery: Ein Tab-Plugin selber schreiben
ナビゲーションを自動生成するタブ
2009/3/14
jQuery: Ein Tab-Plugin selber schreiben
jquery.js
jQueryを使用してタブを作成する方法が掲載されています。 ナビゲーション部分はコンテンツ内の特定の要素（例えばh3要素）の内容を取得して自動的に生成しています。
設置イメージFly Tabsの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.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-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>jQuery: Ein Tab-Plugin selber schreiben | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
(function($){
$.fn.tabs = function(options) {
var defaults = {
container: '#tabcontent',
tabtitle: 'h1'
};
var options = $.extend(defaults, options);
var list = $("<ul>");
var target = $(options.container);
target.children("div").hide();
target.children("div:first").show();
target.children("div").each(function(i){
var heading = $(this).children(options.tabtitle+":first").text();
var targetid = $(this).attr("id");
if(heading == "") heading = i;
var listitem = $("<li><a href='#"+targetid+"'>"+heading+"</a></li>");
listitem.click(function(){
target.children("div").hide();
$("#"+targetid).show();
return false;
});
list.append(listitem);
});
$(this).append(list);
};
})(jQuery);
$(function(){
$("#tabnav").tabs({
container: '#tabcontent',
tabtitle: 'h3'
});
});
</script>
<!-- CSS -->
<style type="text/css">
ul,li { margin:0; padding:0; list-style:none; }
/* navigation */
#tabnav li { float:left; margin-right:5px; }
#tabnav li a { padding:5px 15px; display:block; background:#ddd; }
/* content */
#tabcontent { clear:both; border:1px solid #ddd; width:500px; }
#tabcontent div { background:#eee; padding:20px;
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://ugotit.de/2009/03/02/jquery-ein-tab-plugin-selber-schreiben/'>jQuery: Ein Tab-Plugin selber schreiben</a> | 設置サンプル</h1>
<p>▼ナビゲーション部分はコンテンツ内の特定の要素（例えばh3要素）の内容を取得して自動的に生成しています。 </p>
<!-- CODE -->
<div id="tabnav"></div>
<div id="tabcontent">
<div id="tab1">
<h3>タブ1</h3>
<p>
［タブ1］をクリックした時に表示されます。
</p>
</div>
<div id="tab2">
<h3>タブ2</h3>
<p>
［タブ2］をクリックした時に表示されます。
</p>
</div>
<div id="tab3">
<h3>タブ3</h3>
<p>
［タブ3］をクリックした時に表示されます。
</p>
</div>
</div>
<!-- / CODE -->
</div>
</body>
</html>
simplyTabs
タブで画像切替
2009/3/14
Simply Tabs
ページ内のアンカーリストから、タブ切替コンテンツを作成するjQueryプラグイン。
アンカーの対象となる要素が存在しない場合、その特定のタブは作成されません。 ナビゲーションやコンテンツのクラス名はオプションで変更することができます。
設置イメージSimply Tabsの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.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-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Simply Tabs | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/simplytabs/jquery.simplytabs.js"></script>
<script type="text/javascript">
$(function(){
$('#tabbedTextContent').simplyTabs({ onShow: function(){
//this callback displays the img title as image legend
var caption = $(this.hash +' img').eq(0).attr('title');
$('#imageLegend').text(caption);
}});
});
</script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/content/lib/jquery/simplytabs/jquery.simplytabs.css" />
<style type="text/css">
/* this page css */
#leftcol { width:240px; height:241px; }
.simplyTabs .tab-panel { border:1px dotted black; padding-top:20px; border-width:1px 0; width:100%; }
.simplyTabs ul.tab-menu { font-size:12px; }
#imageLegend { width:auto; font-style:italic; font-size:12px; border-right-width:0; padding:0 10px; }
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://plugins.jquery.com/project/simplyTabs'>Simply Tabs</a> | 設置サンプル</h1>
<p>▼画像をタブ切替します。</p>
<!-- CODE -->
<div id="leftcol">
<div id="tabbedTextContent">
<div id="fragment0">
<img src="http://farm4.static.flickr.com/3514/3274514408_1800118ded_m.jpg"
title="アボガド シーザーサラダ" />
</div>
<div id="fragment1">
<img src="http://farm4.static.flickr.com/3509/3273696567_ebf4ed4381_m.jpg"
title="アボガド刺" />
</div>
<div id="fragment2">
<img src="http://farm4.static.flickr.com/3427/3273696469_aa2aaf5e89_m.jpg"
title="アボガドとベーコンのピザ" />
</div>
<div id="fragment3">
<img src="http://farm4.static.flickr.com/3316/3273696493_570fdd0ee5_m.jpg"
title="ハニートースト" />
</div>
<ul class="tabsNavMenu">
<li><a href="#fragment0">0</a></li>
<li><a href="#fragment1">1</a></li>
<li><a href="#fragment2">2</a></li>
<li><a href="#fragment3">3</a></li>
<li id="imageLegend">I ♥ avocado</li>
</ul>
</div>
</div>
<!-- / CODE -->
</div>
</body>
</html>
zudolab jqTabContents
タブ部分をテキストまたは画像で指定可能なタブ
2009/3/14
zudolab jqTabContents
jquery.js、jqTabContents.js
タブ部分をテキストまたは画像で指定可能なタブ切替コンテンツを作成するjQueryプラグイン。
設置イメージzudolab jqTabContentsの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.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-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>zudolab jqTabContents | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jqtabcontents/jqTabContents.js"></script>
<script type="text/javascript">
new TabContents("#tabNav1 a");
new TabContents("#tabNav2 a");
</script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/content/lib/jquery/jqtabcontents/style.css" />
<link rel="stylesheet" type="text/css" href="/content/lib/jquery/jqtabcontents/forjs.css" />
<style type="text/css">
/* over-write */
ul,li { list-style:none; margin:0; padding:0; }
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://javascript.zudolab.net/en/jqTabContents/'>zudolab jqTabContents</a> | 設置サンプル</h1>
<!-- CODE -->
<h2>テキストタブ</h2>
<div class="tabSet1">
<ul id="tabNav1">
<li><a href="#content1">タブ1</a></li>
<li><a href="#content2" class="showThis">タブ2</a></li>
<li><a href="#content3">タブ3</a></li>
<li><a href="#content4">タブ4</a></li>
</ul>
<div class="tabContentsGroup">
<div class="content" id="content1">
<h3>タブ1</h3>
<p>［タブ1］をクリックした時に表示されるコンテンツです。</p>
</div>
<div class="content" id="content2">
<h3>タブ2</h3>
<p>［タブ2］をクリックした時に表示されるコンテンツです。</p>
</div>
<div class="content" id="content3">
<h3>タブ3</h3>
<p>［タブ3］をクリックした時に表示されるコンテンツです。</p>
</div>
<div class="content" id="content4">
<h3>タブ4</h3>
<p>［タブ4］をクリックした時に表示されるコンテンツです。</p>
</div>
</div>
</div>
<h2>画像タブ</h2>
<div class="tabSet2">
<ul id="tabNav2">
<li><a href="#content5" class="showThis"><img src="/content/lib/jquery/jqtabcontents/imgs/off/1.gif" alt="タブ5" /></a></li>
<li><a href="#content6"><img src="/content/lib/jquery/jqtabcontents/imgs/off/2.gif" alt="タブ6" /></a></li>
<li><a href="#content7"><img src="/content/lib/jquery/jqtabcontents/imgs/off/3.gif" alt="タブ7" /></a></li>
<li><a href="#content8"><img src="/content/lib/jquery/jqtabcontents/imgs/off/4.gif" alt="タブ8" /></a></li>
</ul>
<div class="tabContentsGroup">
<div class="content" id="content5">
<h3>タブ5</h3>
<p>［タブ5］をクリックした時に表示されるコンテンツです。</p>
</div>
<div class="content" id="content6">
<h3>タブ6</h3>
<p>［タブ6］をクリックした時に表示されるコンテンツです。</p>
</div>
<div class="content" id="content7">
<h3>タブ7</h3>
<p>［タブ7］をクリックした時に表示されるコンテンツです。</p>
</div>
<div class="content" id="content8">
<h3>タブ8</h3>
<p>［タブ8］をクリックした時に表示されるコンテンツです。</p>
</div>
</div>
</div>
<!-- / CODE -->
</div>
</body>
</html>