jQuery タブ切り替え時に選択したタブを先頭に移動
jQueryで選択したタブが常に先頭になるタブ切り替えの生成
jQuery
$(function () {
var current_index = 0;
var tab_index = 0;
// タブにIDを付与
$('li').each(function(i){
$(this).attr('id', 'id' + i);
});
$('li').click(function() {
if ($('li').index(this) != 0) {
current_index = $('li').index(this);
// IDから番号を抽出
tab_index = $(this).attr('id').replace('id', '');
// タブの内容
$('article').hide().eq(tab_index).fadeIn('fast');
// タブ
$('li').removeClass('selected').eq(current_index).addClass('selected');
// 選択したタブを先頭に移動、順番入れ替え
$('#tab').prepend(this, $(this).nextAll());
}
});
});
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>
サンプル
