jQuery タブ切り替え 上下段入れ替え
jQueryで選択したタブの段が常に下段になるタブ切り替えの生成
jQuery
$(function () {
var index = 0;
$('li').click(function() {
var tab = $(this).parent('ul').attr('id');
var tab_count = 0;
if (tab == 'upper') {
// 選択したタブの段を下にする場合
$('#lower').after($('#upper'));
// 選択したタブの段を上にする場合
// $('#lower').before($('#upper'));
// 1段あたりのタブの総数
tab_count = $('#lower').children().length;
} else if (tab == 'lower') {
$('#upper').after($('#lower'));
// $('#upper').before($('#lower'));
// tab_count = $('#upper').children().length;
}
index = $('li').index(this);
// タブの内容
$('article').hide().eq(index - tab_count).fadeIn('fast');
// $('article').hide().eq(index + tab_count).fadeIn('fast');
// タブ
$('li').removeClass('selected').eq(index).addClass('selected');
});
});
CSS
article {
display: none;
}
article.selected {
display: block;
}
HTML
<!-- 下段 -->
<ul id="lower">
<li>タブ 5</li>
<li>タブ 6</li>
<li>タブ 7</li>
<li>タブ 8</li>
</ul>
<!-- 上段 -->
<ul id="upper">
<li class="selected">タブ 1</li>
<li>タブ 2</li>
<li>タブ 3</li>
<li>タブ 4</li>
</ul>
<!-- 選択したタブの段を上にする場合は上段と下段のHTMLを入れ替え -->
<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>
<article><p>タブ 5の内容</p></article>
<article><p>タブ 6の内容</p></article>
<article><p>タブ 7の内容</p></article>
<article><p>タブ 8の内容</p></article>
</div>
サンプル
