ありがちな処理・・・jQueryのサンプルコードとカスタマイズと高速化

サンプルの解説

<div id="t1" class="tab_wrap">

<ul>
<li class="c">タブ1</li>
<li>タブ2</li>
<li>タブ3</li>
<li>タブ4</li>
<li>タブ5</li>
</ul>

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

</div>

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

上のサンプルでは、このhtmlソースを二つ貼り付けています（二つ目のid名は変えてあります・・・1ページにタブグループが1つだけでよければ、idは不要です）。
1ページに複数タブグループがあることになります。

class[tab_wrap]内のliタグをタブにし、それぞれのコンテンツはclass[content_wrap]内に記述します。
class[content_wrap]は最初に表示しておくもの以外はclass[d_none]（display:noneを設定済）を指定して、非表示にしておきます。
ちなみにclass[c]は現在のタブを表すデザインを設定してあります。

$(function(){
    $('.tab_wrap li').click(function() {
        var num = $('.tab_wrap li').index(this);
        $('.content_wrap').addClass('d_none');
        $('.content_wrap').eq(num).removeClass('d_none');
        $('.tab_wrap li').removeClass('c');
        $(this).addClass('c');
    });
})

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

jqueryコードはfine×3というサイトの「タブの切替 | よく使うjQuery」にあるサンプルをコピペして、セレクターを変更しています。
どんな風に組まれているか、見てみましょう。

• class[tab_wrap]のliタグ（タブ）をクリックしたら、処理をしたい→$('.tab_wrap li').click(function() { ・・・ });
• [tab_wrap]のliタグの順番に対応するclass[content_wrap]を、liがクリックされるたびに表示したい。
  つまり、クリックされたliタグが何番目なのか（num番目）を取得する→＜3行目＞var num = $('.tab_wrap li').index(this);
  （index()でインデックス番号を取得する）
• [tab_wrap]のliタグがクリックされたら、class[content_wrap]をいったん全部非表示にする。
  つまり、全部のclass[content_wrap]に非表示にするclass[d_none]を加える→＜4行目＞$('.content_wrap').addClass('d_none');
• 例えば、クリックされたのが3番目のliタグだったら、3番目に記述されている[content_wrap]のみを表示したい。
  つまりnum番目のclass[content_wrap]のclass[d_none]を削除する。→＜5行目＞$('.content_wrap').eq(num).removeClass('d_none');
  （.eq()でnum番目のclass[content_wrap]を取り出している）
• 現在表示されているコンテンツに対応するタブがどれかわかるようにしたいので、いったん全部の[tab_wrap]のliタグからclass[c]を削除する
  →＜6行目＞$('.tab_wrap li').removeClass('c');
• クリックされたliタグ自身（this）にclass[c]を与える→＜7行目＞$(this).addClass('c');

こんな風に、セレクター・・・つまりどの要素（タグ・class・id）に何をしてほしいと記述されているのかなーと解析していくと、何をやっているのかわかると思います。

ところで、実はこれだけでは1ページに複数タブグループがあるとき、うまく動作しません。
一つのタブグループのタブをクリックすると、ほかのタブグループも反応してしまい、表示もおかしくなってしまいます。

これを回避するためのもっとも単純な方法は、class[tab_wrap]にid名やそのページ内で一意のclass名を付けて、その名前の分だけこのjqueryコードを用意すればよいです。
しかし、セレクターが違うだけの同じコードをたくさん書くのは面倒ですし、あまりスマートな方法とは言えません。
このタブ切り替えのjqueryコードをタブの数の分だけ書かなくても対応できるように、カスタマイズしてみましょう。

方法はいろいろ考えられると思いますが、今回はclass[tab_wrap]を設定しているdivタグにそれぞれid[t1][t2]・・・といった適当に重複しないようなid名を追加し、それでどのタブグループのliタグであるかを判定しようと思います。

$(function(){
    $('.tab_wrap li').click(function() {
        var p = '#' + $(this).parents('div').attr('id') + ' ';
        var num = $(p + 'li').index(this);
        $(p + '.content_wrap').addClass('d_none');
        $(p + '.content_wrap').eq(num).removeClass('d_none');
        $(p + 'li').removeClass('c');
        $(this).addClass('c');
    });
})

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

• 3行目で、クリックした.tab_wrap liの親のid名をattr('id')で取得しています。セレクターとして使えるように#と半角スペースを追加して、pという変数に格納しておきます。
• 特定の親の中にあるどのliをクリックしたのか、$(p + 'li').index(this)でインデックス番号を取得します。
• あとは、元のjqueryと同じような処理をしています。ただ、セレクターに親のid名を追加しています。

このように、jqueryについてある程度理解していれば、既存のサンプルコードをカスタマイズして、使いやすくすることも可能です。