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>

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。
主にLAPP環境でPHPを書いています。
最近はjQueryをよく書いています。