jquery.tab.js

Basic setting

タブ1の中身

タブ2の中身
タブ2の中身
タブ2の中身

タブ3の中身

下の要素

$(document).ready(function(){
	$('#sample1-1 .mod-tab-nav').tab();
});

HTML

<div id="sample1-1">
	<ul class="mod-tab-nav">
		<li><a href="#sample1-1-1">タブ1</a></li>
		<li><a href="#sample1-1-2">タブ2</a></li>
		<li><a href="#sample1-1-3">タブ3</a></li>
	</ul>

	<div class="mod-tab-contents">
		<div id="sample1-1-1">タブ1の中身</p></div>
		<div id="sample1-1-2">タブ2の中身</p></div>
		<div id="sample1-1-3">タブ3の中身</p></div>
	</div>
</div>

speed

タブ1の中身

タブ2の中身
タブ2の中身
タブ2の中身

タブ3の中身

下の要素

$(document).ready(function(){
	$('#sample2-1 .mod-tab-nav').tab({
		speed: 200
	});
});

cookie: true, fixedHeight: 'max'

タブ1の中身

タブ2の中身
タブ2の中身
タブ2の中身

タブ3の中身

下の要素

$(document).ready(function(){
	$('#sample3-1 .mod-tab-nav').tab({
		 cookie: true
		,cookieName: 'mod-tab-cookie'
		,fixedHeight: 'max'
	});
});

URLに含まれるハッシュのIDをカレント表示

リンク1
リンク2
リンク3

タブ1の中身

タブ2の中身
タブ2の中身
タブ2の中身

タブ3の中身

下の要素

$(document).ready(function(){
	$('#sample2-2 .mod-tab-nav').tab({
		hash: true
	});
});

other option

タブ1の中身

タブ2の中身
タブ2の中身
タブ2の中身

タブ3の中身

下の要素

$(document).ready(function(){
	$('#sample4-1 .mod-tab-nav').tab({
		 navItemSelector: 'a'
		,active: 2
		,activeClass: 'current'
		,nonActiveClass: 'non-active'
		,bodyWrapperClass: 'mod-tab-bodyWrapper'
		,setClassChooseElement: true
		,setClassChooseElementSelector: 'body'
		,setClassChooseElementClass: 'mod-activeItem-'
		,speed: 200
		,fixedHeight: 'max'
	});
});