カテゴリページ内　複数タブ

解決済

(@iguigu)

idの番号を変えることで１ページ内に#numの連番で複数タブを置ける様にはしたのですが、
while文のなかで番号に連番を振るやり方がわかりません。
初心者ですいませんが、よろしくお願いします

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

トピック「カテゴリページ内　複数タブ」には新たに返信することはできません。

カテゴリページ内　複数タブ

トピックタグ

表示