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>

サンプル

最新の記事

プロフィール

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