WEBデザインテクニック|KLUTCHE

【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>

“【jQuery】これで簡単!フェード処理で切り替わるタブコンテンツの作成方法” への1件のコメント

  1. mori より:

    コードを利用させてもらいました。

    ありがとうございます。

    タブ切り替え部分をページ下部に使用しているのですが、
    ただ、タブをクリックするとトップへと戻ってしまいます。

    return false;

    をはずすとコンテンツへ飛んでしまいます。

    どうしたらいいですか?

mori へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です