タブ切替よくあるタブ切替を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');