jQuery タブコンテナを複数配置

解決済

質問者：osushi88
質問日時：2011/04/17 17:39
回答数：1件

下記のSimple Tabs wを使って、同一ページ内で複数のタブコンテナを表示したいのですが、どのような書き方をしたらよいでしょうか。
http://www.sohtanaka.com/web-design/simple-tabs- …

xhtml,cssは理解しているつもりですが、jQueryはよくわかっていない状態です。
よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

No.1ベストアンサー

回答者： reggaepunc
回答日時：2011/04/18 00:45

<script type="text/javascript"

src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/ …
<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" の数字部分を増やしていけばいくらでも設置できるようになったと思います。