- ベストアンサー
jQuery タブコンテナを複数配置
下記のSimple Tabs wを使って、同一ページ内で複数のタブコンテナを表示したいのですが、どのような書き方をしたらよいでしょうか。 http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/ xhtml,cssは理解しているつもりですが、jQueryはよくわかっていない状態です。 よろしくお願いします。
- osushi88
- お礼率50% (2/4)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript"> $.hoge = function( target ) { //Default Action target.find(".tab_content").hide(); //Hide all content target.find("ul.tabs li:first").addClass("active").show(); //Activate first tab target.find(".tab_content:first").show(); //Show first tab content //On Click Event target.find("ul.tabs li").click(function() { target.find("ul.tabs li").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab target.find(".tab_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content activeTab = activeTab.replace( '#', '.' ); target.find(activeTab).fadeIn(); //Fade in the active content return false; }); }// $.hoge // -------------------------------------- $(function() { $.hoge( $('#num1') ); $.hoge( $('#num2') ); }); </script> </head> <body> <div id="num1" class="container"> <ul class="tabs"> <li><a href="#tab1">Gallery</a></li> <li><a href="#tab2">Submit</a></li> </ul> <div class="tab_container"> <div class="tab1 tab_content"> <h2>Gallery</h2> </div> <div class="tab2 tab_content"> <h2>Submit</h2> </div> </div> </div> <div id="num2" class="container"> <ul class="tabs"> <li><a href="#tab1">Gallery</a></li> <li><a href="#tab2">Submit</a></li> </ul> <div class="tab_container"> <div class="tab1 tab_content"> <h2>Gallery</h2> </div> <div class="tab2 tab_content"> <h2>Submit</h2> </div> </div> </div> </body> </html> ---------------------------- javascriptとhtmlを書き換えました。 同一html内の複数タブ設置に対応不可能だったので、対応可能にさせました。 これでコピペと id="num2" の数字部分を増やしていけばいくらでも設置できるようになったと思います。
お礼
お礼が遅くなってすみません。 教えていただいた書き方で設置できました！ また、すぐに回答していただいてとても助かりました。 ありがとうございました。