jQuery タブ切り替え
jQueryでタブ切り替えを生成
タブ<li>とタブの内容<article>の親子関係のインデックスを一致させておく。
jQuery
$(function () {
var index = 0;
$('li').click(function() {
if (index != $('li').index(this)) {
index = $('li').index(this);
// タブの内容
$('article').hide().eq(index).fadeIn('fast');
// タブ
$('li').removeClass('selected').eq(index).addClass('selected');
}
});
});
CSS
article {
display: none;
}
article.selected {
display: block;
}
HTML
<ul id="tab">
<li class="selected">タブ 1</li>
<li>タブ 2</li>
<li>タブ 3</li>
<li>タブ 4</li>
</ul>
<div id="detail">
<article class="selected"><p>タブ 1の内容</p></article>
<article><p>タブ 2の内容</p></article>
<article><p>タブ 3の内容</p></article>
<article><p>タブ 4の内容</p></article>
</div>
サンプル
