［JS］タブ式メニューとアコーディオンをつかったサンプル

Category
： Javascript

昨日紹介しましたアコーディオンとタブの切替を使ったサンプルを作ってみました。

この前紹介したyuga.jsにはタブの切替機能もついていますので、自分はいつもこのyuga.jsの機能を使ってやっていますので、それの使い方など簡単な解説をしておきたいと思います。

デモページの解説

XHTML

<ul class="tabNav">
<li><a href="#tab1">メニュー 1 </a></li>
<li><a href="#tab2">メニュー 2</a></li>
<li><a href="#tab3">メニュー 3</a></li>
</ul>

<div class="tabContents">
<div id="tab1">
<dl class="navi">
<dt>メニュー 1 の質問内容</dt>
<dd>メニュー 1 の質問に対する答え。</dd>
<dt>メニュー 1 の質問内容</dt>
<dd>メニュー 1 の質問に対する答え。</dd>
<dt>メニュー 1 の質問内容</dt>
<dd>メニュー 1 の質問に対する答え。</dd>
<dt>メニュー 1 の質問内容</dt>
<dd>メニュー 1 の質問に対する答え。</dd>
<dt>メニュー 1 の質問内容</dt>
<dd>メニュー 1 の質問に対する答え。</dd>
<dt>メニュー 1 の質問内容</dt>
<dd>メニュー 1 の質問に対する答え。</dd>
</dl>
<!--/ #tab1--></div>

<div id="tab2">
<dl class="navi">
<dt>メニュー 2 の質問内容</dt>
<dd>メニュー 2 の質問に対する答え。</dd>
<dt>メニュー 2 の質問内容</dt>
<dd>メニュー 2 の質問に対する答え。</dd>
<dt>メニュー 2 の質問内容</dt>
<dd>メニュー 2 の質問に対する答え。</dd>
<dt>メニュー 2 の質問内容</dt>
<dd>メニュー 2 の質問に対する答え。</dd>
<dt>メニュー 2 の質問内容</dt>
<dd>メニュー 2 の質問に対する答え。</dd>
<dt>メニュー 2 の質問内容</dt>
<dd>メニュー 2 の質問に対する答え。</dd>
</dl>
<!--/ #tab2--></div>

<div id="tab3">
<dl class="navi">
<dt>メニュー 3 の質問内容</dt>
<dd>メニュー 3 の質問に対する答え。</dd>
<dt>メニュー 3 の質問内容</dt>
<dd>メニュー 3 の質問に対する答え。</dd>
<dt>メニュー 3 の質問内容</dt>
<dd>メニュー 3 の質問に対する答え。</dd>
<dt>メニュー 3 の質問内容</dt>
<dd>メニュー 3 の質問に対する答え。</dd>
<dt>メニュー 3 の質問内容</dt>
<dd>メニュー 3 の質問に対する答え。</dd>
<dt>メニュー 3 の質問内容</dt>
<dd>メニュー 3 の質問に対する答え。</dd>
</dl>
<!--/ #tab3--></div>

<!--/ .tabContents--></div>

画像にしてみるとこんな感じです。
XHTML

CSS

.tabNav	{
	width: 100%;
	
}
.tabNav li	{
	float: left;
	margin: 0 5px -1px;
	font-weight: bold;
	text-align: center;
}
.tabNav a	{
	display: block;
	width: 80px;
	padding: 5px 10px;
	border-top: 1px solid #CCC;
	border-right: 1px solid #CCC;
	border-left: 1px solid #CCC;
	color: #333;
}
.tabNav a.active	{
	border-bottom: 1px solid #FFF;
}
.tabContents	{
	clear: both;
	padding: 10px;
	border: 1px solid #CCC;
	margin-bottom: 30px;W
}
.tabContents dl	{
	margin-bottom: 15px;
}
.tabContents dt	{
	background: url(../image/q.gif) no-repeat 5px 8px;
	padding: 8px 5px 8px 30px;
	font-weight: bold;
}
.tabContents dd	{
	background: url(../image/a.gif) no-repeat 5px 8px;
	padding: 8px 5px 8px 30px;
	margin-bottom: 5px;
	border-bottom: 1px dotted #CCC;
}

※現在開いてるタブのa要素に「class="active"」が付くようになっています。