タブの切替 | よく使うjQuery

よくあるタブ切替をjQueryで作成しました。プラグイン等も多数ありますがスクリプトを数行書くだけなので、わざわざレスポンスを落としてまでプラグインを使う必要性が感じられないので、いつも下記ソースをベースに作成します。

2012/9/7　要望が多かったのでタブを画像にしたパターンの記事も作成しました。
タブの切替 | よく使うjQuery（画像編）

タブの切替

■html

<ul id="tab">
<li class="select">タブ1</li>
<li>タブ2</li>
<li>タブ3</li>
<li>タブ4</li>
</ul>
<div class="content_wrap">内容1</div>
<div class="content_wrap disnon">内容2</div>
<div class="content_wrap disnon">内容3</div>
<div class="content_wrap disnon">内容4</div>

■javascript

$(function() {
    $("#tab li").click(function() {
        var num = $("#tab li").index(this);
        $(".content_wrap").addClass('disnon');
        $(".content_wrap").eq(num).removeClass('disnon');
        $("#tab li").removeClass('select');
        $(this).addClass('select')
    });
});

ダウンロード

解説

htmlやcssは各々お好みで問題ありません。htmlの基本的な構造は、タブとタブに連動したコンテンツ↓になります。

<li class="select">タブ1</li>
<li>タブ2</li>
<li>タブ3</li>
<li>タブ4</li>

<div class="content_wrap">内容1</div>
<div class="content_wrap disnon">内容2</div>
<div class="content_wrap disnon">内容3</div>
<div class="content_wrap disnon">内容4</div>

ちなみクラス「select」は選択されているタブを分かり易くする為のクラスです。

.select {
  background: yellow;
}

コンテンツは初期に表示するもの以外は非表示にします。私の場合はいつも「disnon」という非表示用のクラスを用意しておきます。

.disnon {
  display: none;
}

そして肝心のスクリプトの中身ですが、まずid「tab」の「li」要素をクリックしたら、

$("#tab li").click(function() {

変数「num」にクリックした要素のindex（番号）を格納し、全ての「.content_wrap」を持つ要素に「addClass(‘disnon’)」で非表示用のクラス「disnon」を追加します。

var num = $("#tab li").index(this);
$(".content_wrap").addClass('disnon');

「content_wrap」のうち、番号が同じもの「eq(num)」から「removeClass(‘disnon’)」で非表示用クラス「disnon」をはずします。
同様に全てのタブから「removeClass(‘select’)」でハイライト用のクラス「select」をはずします。

$(".content_wrap").eq(num).removeClass('disnon');
$("#tab li").removeClass('select');

最後にクリックされたタブに、ハイライト用のクラス「select」を追加して完了です。

$(this).addClass('select');

2012年9月7日タブの切替 | よく使うjQuery（画像編） (10)
2011年6月28日 jQueryでプルダウンメニュー（たった5行で！） (7)
2011年8月10日 jQueryでlightbox風の画像表示を自作する (0)
2010年11月15日使い回しのきくソーシャルブックマークボタン (0)
2011年11月7日 jQuery Mobileのテンプレート (9)