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>

サンプル

最新の記事

プロフィール

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