【jQuery】これで簡単!フェード処理で切り替わるタブコンテンツの作成方法
- 2012年03月16日
- Javascript, プログラミング
- 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>
コードを利用させてもらいました。
ありがとうございます。
タブ切り替え部分をページ下部に使用しているのですが、
ただ、タブをクリックするとトップへと戻ってしまいます。
return false;
をはずすとコンテンツへ飛んでしまいます。
どうしたらいいですか?