タブ jQuery Tabs

jQueryで独自のライブラリを使用したタブの実装方法をご紹介します。

ライブラリのダウンロードと設置

「ライブラリのダウンロード」をクリックしてダウンロードしてください。
ライブラリのダウンロード

ダウンロードしたjquery.tabs.jsを任意の場所へ置き読み込みます。
（jQueryの設置および読み込みは、完了もしくは同時作業を行っているものとします。）

<script type="text/javascript" src="jquery.tabs.js"></script>

使い方

タブのナビゲーション部分（アクションする要素）を対象とし、引数のオプション指定としてタブの切り替えるコンテンツをchangingElementに指定します。
changingElementのセレクタ指定はjQueryオブジェクト化した要素でも指定可能です。
オプションはこちらをご覧ください。

JavaScript

$(function() { $(".tab-navigation li").tabs({ changingElement : '.tab-content > div' }); });

HTML

<ul class="tab-navigation"> <li>tab1</li> <li>tab2</li> <li>tab3</li> <li>tab4</li> <li>tab5</li> </ul> <div class="tab-content"> <div>ボックス1</div> <div>ボックス2</div> <div>ボックス3</div> <div>ボックス4</div> <div>ボックス5</div> </div>

CSS

ul.tab-navigation { width:400px; list-style:none; } ul.tab-navigation li { padding:5px 0; width:80px; background-color:#eee; float:left; text-align:center; cursor:pointer; } ul.tab-navigation li.active a, ul.tab-navigation li.active a:hover { background-color:#fff; } div.tab-content div { margin:0 0 10px; padding:10px; border:1px #999 solid; width:378px; height:100px; }

オプション

以下の設定が可能です。

オプション	初期値	説明
defaultActive	0	最初にアクティブにするタブのインデックス番号
changingElement	''	ナビゲーションに紐付く対象のコンテンツ要素
action	'click'	切り替えるイベント
activeClass	'active'	現在地のCSSクラス名
animateMode	'direct'	アニメーションの種類 設定可能な値： 　direct = アニメーションなしの即時切り替え 　slide = スライドアニメーション 　fade = フェードアニメーション
animateDuration	200	アニメーションの動作時間
animateEasing	'linear'	アニメーションのイージング
changeCallback	function() {}	切り替え後のコールバック関数

$(function() { $(".tab-navigation li").tabs({ defaultActive : 2, changingElement : '.tab-content > div', animateDuration : 500 }); });