Показать несколько вкладок JQuery

Question

Я пытаюсь использовать некоторые из этих функций табуляции для отображения содержимого на одной странице. Кроме того, прямо сейчас он отображает только один div. Помогите пожалуйста, спасибо.

http://jsfiddle.net/UtPxx

JAVA

$(function(){ 
    $('.tabs').hide(); 
    $('#tabs a').bind('click', function(e){ 
     $('#tabs a.current').removeClass('current'); 
     $('.tabs:visible').hide(); 
     $(this.hash).show(); 
     $(this).addClass('current'); 
     e.preventDefault(); 
    }).filter(':first').click(); 
}); 

HTML

<ul id="tabs"> 
<li><a href="#1">1</a></li> 
<li><a href="#2">2</a></li> 
</ul> 
<div id="1" class="tabs"> 
Content 1 
</div> 
<div id="2" class="tabs"> 
Content 2 
</div> 

<ul id="tabs"> 
<li><a href="#3">3</a></li> 
<li><a href="#4">4</a></li> 
</ul> 
<div id="3" class="tabs"> 
Content 3 
</div> 
<div id="4" class="tabs"> 
Content 4 
</div> 

Answer 1

Попробуйте это:

<script> 
    $(function(){ 
    $('.tabs, .tabs2').hide(); 
    $('#tabs a, #tabs2 a').bind('click', function(e){ 
    var cl = $(this).parent().parent().attr('id'); 
    if(cl=='tabs') 
     { 
     $('#tabs a.current').removeClass('current'); 
     $('.tabs:visible').hide(); 
     } 
     else 
     if(cl=='tabs2') 
     { 
     $('#tabs2 a.current').removeClass('current'); 
     $('.tabs2:visible').hide(); 
     } 
     $(this.hash).show(); 
     $(this).addClass('current'); 
     e.preventDefault(); 
    }).filter(':first').click(); 
}); 
</script> 
<ul id="tabs"> 
<li><a href="#1">1</a></li> 
<li><a href="#2">2</a></li> 
<li><a href="#3">3</a></li> 
</ul> 

<div id="1" class="tabs"> 
Content 1 
</div> 
<div id="2" class="tabs"> 
Content 2 
</div> 
<div id="3" class="tabs"> 
Content 3 
</div> 

<ul id="tabs2"> 
<li><a href="#33">3</a></li> 
<li><a href="#4">4</a></li> 
</ul> 
<div id="33" class="tabs2"> 
Content 3 
</div> 
<div id="4" class="tabs2"> 
Content 4 
</div> 

Я использовал 3 в обеих закладках (для решения другой проблемы). Когда вы нажимаете «3» на любой вкладке, она всегда будет отображать третий div первой вкладки, потому что когда this.hash выполняется, он ищет №3 и каждый раз возвращает первый элемент с идентификатором 3. Поэтому я изменил # 3 до № 33 на второй вкладке.

Надеюсь, что это решит вашу проблему.