مشکل با قرار دادن دو Tab کنار یکدیگر

[سعید شعبانی 2047]

سلام دوستان خسته نباشید

من برای نمایش یک tab سه تایی از کد html زیر استفاده می کنم

<ul class="tabs">
<li class="active"><a href="#tab1">Recent</a></li>
<li><a href="#tab2">Popular</a></li>
<li><a href="#tab3">Random</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<ul>
<li>matne delkhah</li>
<li>matne delkhah</li>
<li>matne delkhah</li>
</ul>
</div>
<div id="tab2" class="tab_content" style="display:none;">
<ul>
<li>matne delkhah</li>
<li>matne delkhah</li>
<li>matne delkhah</li>
</ul>
</div>
<div id="tab3" class="tab_content" style="display:none;">
<ul>
<li>matne delkhah</li>
<li>matne delkhah</li>
<li>matne delkhah</li>
</ul>
</div>
</div>

و این هم کد جاوا اسکریپت مربوط به آن است.

// Tabbed sidebar menu @ http://designA.ir/
$(document).ready(function() {
	 $(".tab_content").hide();
	 $("ul.tabs li:first").addClass("active").show();
	 $(".tab_content:first").show();
	 $("ul.tabs li").click(function() {
		 $("ul.tabs li").removeClass("active");
		 $(this).addClass("active");
		 $(".tab_content").hide();
		 var activeTab = $(this).find("a").attr("href");
		 //$(activeTab).fadeIn();
		 if ($.browser.msie) {$(activeTab).show();}
		 else {$(activeTab).fadeIn();}
		 return false;
	 });
});

ولی من می خواهم در کنار همین tab سه تایی یک tab سه تایی دیگر هم بگذارم وقتی که از همان کد html استفاده می کنم با زدن سر برگ tab ها فقط tab های سری اول کار می کنند و tab های سری دوم اصلا کار نمی کنند.

لطفا راهنمایی کنید

ویرایش شده اردیبهشت 92 توسط سعید شعبانی

[Parsa 23463]

ID تبها را به ترتیب قرار دهید

<div id="tab4" class="tab_content" style="display:none;">

[سعید شعبانی 2047]

الان درست شد ولی مشکلی که موجود داره این هست که همزمان فقط یکی از tab ها می توانند کار کنند. یعنی زمانی که از سه tab اول استفاده می کنیم دیگه نمیشه محتویات سه tab بعدی را ببینیم

[Parsa 23463]

برای فعال بودن دو تب

کد را باید دوبار تکرار کنید

<ul class="tabs2">

و بخش click جکوئری را برای تب جدید تنظیم کنید

[سعید شعبانی 2047]

ممنون درست شد کد ها را اینجا می گذارم تا بقیه دوستان هم استفاده کنند

<ul class="tabs">
<li class="active"><a href="#tab1">Recent</a></li>
<li><a href="#tab2">Popular</a></li>
<li><a href="#tab3">Random</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
  <ul>
   <li>matne delkhah</li>
   <li>matne delkhah</li>
   <li>matne delkhah</li>
  </ul>
</div>
<div id="tab2" class="tab_content" style="display:none;">
  <ul>
   <li>matne delkhah</li>
   <li>matne delkhah</li>
   <li>matne delkhah</li>
  </ul>
</div>
<div id="tab3" class="tab_content" style="display:none;">
  <ul>
   <li>matne delkhah</li>
   <li>matne delkhah</li>
   <li>matne delkhah</li>
  </ul>
</div>
</div>

<ul class="tabs1">
<li class="active"><a href="#tab4">Recent</a></li>
<li><a href="#tab5">Popular</a></li>
<li><a href="#tab6">Random</a></li>
</ul>
<div class="tab_container1">
<div id="tab4" class="tab_content1">
  <ul>
   <li>matne delkhah</li>
   <li>matne delkhah</li>
   <li>matne delkhah</li>
  </ul>
</div>
<div id="tab5" class="tab_content1" style="display:none;">
  <ul>
   <li>matne delkhah</li>
   <li>matne delkhah</li>
   <li>matne delkhah</li>
  </ul>
</div>
<div id="tab6" class="tab_content1" style="display:none;">
  <ul>
   <li>matne delkhah</li>
   <li>matne delkhah</li>
   <li>matne delkhah</li>
  </ul>
</div>
</div>

    // Tabbed sidebar menu @ http://designA.ir/
    $(document).ready(function() {
	    $(".tab_content").hide();
	    $("ul.tabs li:first").addClass("active").show();
	    $(".tab_content:first").show();
	    $("ul.tabs li").click(function() {
		    $("ul.tabs li").removeClass("active");
		    $(this).addClass("active");
		    $(".tab_content").hide();
		    var activeTab = $(this).find("a").attr("href");
		    //$(activeTab).fadeIn();
		    if ($.browser.msie) {$(activeTab).show();}
		    else {$(activeTab).fadeIn();}
		    return false;
	    });
    });
    // Tabbed sidebar menu @ http://designA.ir/
    $(document).ready(function() {
	    $(".tab_content1").hide();
	    $("ul.tabs1 li:first").addClass("active").show();
	    $(".tab_content1:first").show();
	    $("ul.tabs1 li").click(function() {
		    $("ul.tabs1 li").removeClass("active");
		    $(this).addClass("active");
		    $(".tab_content1").hide();
		    var activeTab = $(this).find("a").attr("href");
		    //$(activeTab).fadeIn();
		    if ($.browser.msie) {$(activeTab).show();}
		    else {$(activeTab).fadeIn();}
		    return false;
	    });
    });