【jQuery】これで簡単！フェード処理で切り替わるタブコンテンツの作成方法

シンプルなタブコンテンツを実装したい時、jQueryを使うことにより、短くてシンプルなソースで設置することができます。
JavascriptもHTMLもすっきりと収まるのですがすがしいです。

デモ

デモページ

Javascript

jQuery依存のスクリプトなので、まずjQueryを読み込みます。

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

その後に以下のJavascriptを記載します。

<script type="text/javascript">
$(document).ready(function() {
     //初期表示
     $(".tab_content").hide();//全ての.tab_contentを非表示
     $("ul.tabs li:first").addClass("active").show();//tabs内最初のliに.activeを追加
     $(".tab_content:first").show();//最初の.tab_contentを表示
     //タブクリック時
     $("ul.tabs li").click(function() {
          $("ul.tabs li").removeClass("active");//.activeを外す
          $(this).addClass("active");//クリックタブに.activeを追加
          $(".tab_content").hide();//全ての.tab_contentを非表示
          var activeTab = $(this).find("a").attr("href");//アクティブタブコンテンツ
          $(activeTab).fadeIn();//アクティブタブコンテンツをフェードイン
          return false;
     });
});
</script>

HTML

<ul class="tabs">
<li><a href="#tab1">タブ1</a></li>
<li><a href="#tab2">タブ2</a></li>
<li><a href="#tab3">タブ3</a></li>
</ul>

<div class="tab_content" id="tab1">
<img src="01.jpg" width="200" height="150" alt="01"><br>
コンテンツ1
</div>

<div class="tab_content" id="tab2">
<img src="02.jpg" width="200" height="150" alt="02"><br>
コンテンツ2
</div>

<div class="tab_content" id="tab3">
<img src="03.jpg" width="200" height="150" alt="03"><br>
コンテンツ3
</div>