skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

jQueryでタブメニューを作る（プラグインなし）

｜ ｜ ｜ ｜ ｜ ｜ ｜

JavaScriptライブラリのjQueryには数多くのプラグインがあり、それを利用することで簡単にリッチなコンテンツを作成できます。
今回はその流れに逆らい、プラグインなしでタブメニューを作成してみたいと思います。
via：Tabbed Structure

使用方法
まずは、jQueryからjquery.jsをダウロードします。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script>
$(function(){
$("a.tab").click(function () {　
//class="tab"のaタグがクリックされたとき
$(".active").removeClass("active");
//class="active"からacticveを削除する
$(this).addClass("active");
//クリックされたaタグにclass="active"を付与
$(".content").slideUp();
//コンテンツをスライドアップで表示
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
//クリックされたaタグのtitle属性と同じid要素をスライドダウンで非表示
});
});
</script>

上記にのっとり、htmlを記述していきます。
<div class="tabbed_area">
<ul class="tabs">
<li><a href="#" title="content_1" class="tab active">タブ1</a></li>
//　最初に開いておくタブにclass="active"を付与しておきます。
<li><a href="#" title="content_2" class="tab">タブ2</a></li>
<li><a href="#" title="content_3" class="tab">タブ3</a></li>
</ul>
<div id="content_1" class="content">
//ここでもidは上記li a要素のtitleで指定したものと同一にしてください。
<p>タブコンテンツ1タブコンテンツ1タブコンテンツ1<br />タブコンテンツ1タブコンテンツ1</p>
</div>
<div id="content_2" class="content">
<p>タブコンテンツ2タブコンテンツ2タブコンテンツ2<br />タブコンテンツ2タブコンテンツ2</p>
</div>
<div id="content_3" class="content">
<p>タブコンテンツ3タブコンテンツ3タブコンテンツ3<br />タブコンテンツ3タブコンテンツ3</p>
</div>
</div>

あとは、CSSでデザインを調整すれば完成です。
.tabbed_area {width:450px;border:1px solid #494e52;background-color:#636d76;padding:8px;}
//タブコンテンツ全体のデザイン
ul.tabs {margin:0px; padding:0px;margin-top:5px;margin-bottom:6px;}
ul.tabs li {list-style:none;display:inline;}
ul.tabs li a {background-color:#464c54;color:#ffebb5;padding:8px 14px 8px 14px;text-decoration:none;border:1px solid #464c54;}
ul.tabs li a:hover {background-color:#2f343a;border-color:#2f343a;}
//タブ自体のデザイン
ul.tabs li a.active {background-color:#ffffff;color:#282e32;border:1px solid #464c54;border-bottom: 1px solid #ffffff;}
//タブが開いているときのデザイン
.content {background-color:#ffffff;padding:10px;border:1px solid #464c54;}
//タブの中身のデザイン
#content_2, #content_3 { display:none; }
//最初に開いているもの以外のタブの中身は消しておく。

jQueryでタブメニューを作る（プラグインなし）サンプル

記事作成：2009年03月17日

前の記事：マウスオーバーでもタブメニューを開閉できるJavaScript「SkiyoTabs」
次の記事：関連性をビジュアライズするJavaScript「jConnecter」