タブ切り替え

簡単なタブによるコンテンツの表示切替を実装するコードです。

◆jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>

◆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')
    });
});

参考：http://www.finefinefine.jp/jquery/kiji422/