Jquery - 转换为在一个页面上使用多个选项卡？

Question

我使用一个简单的jQuery选项卡中设置此代码：

$('.tabs .tab_content').hide(); // Hide all divs 
$('.tabs .tab_content:first').show(); // Show the first div 
$('.tabs ul.tab_nav li:first').addClass('current_tab'); // Set the class of the first link to active 

$('.tabs ul.tab_nav li a').click(function(){ //When any link is clicked 
    $('.tabs ul.tab_nav li a').removeClass('current_tab'); // Remove active class from all links 
    $(this).addClass('current_tab'); //Set clicked link class to active 

    var currentTab = $(this).attr('href'); // Set variable currentTab to value of href attribute of clicked link 

    $('.tabs .tab_content').hide(); // Hide all divs 
    $(currentTab).show(); // Show div with id equal to variable currentTab 
    return false; 
}); 

而这里的样本HTML：

<div class="box tabs"> 
        <div class="box_header"> 
    <h2>3/4 Width</h2> 
    <ul class="tab_nav"> 
     <li><a href="#tab1" class="current_tab">Tab #1</a></li> 
     <li><a href="#tab2">Tab #2</a></li> 
     <li><a href="#tab3">Tab #3</a></li> 
     <li><a href="#tab4">Tab #4</a></li> 
    </ul> 
</div> 
<div class="box_content tab_content" id="tab1">1</div> 
<div class="box_content tab_content" id="tab2">2</div> 
<div class="box_content tab_content" id="tab3">3</div> 
<div class="box_content tab_content" id="tab4">4</div> 
</div> 

它精美的作品为一组标签的，但如果我添加另一组（也就是上面的另一个代码块），这一切都会搞砸 - 它将标签视为一个大对象，而不是两个单独的标签实例。我该如何转换它才能工作？理想情况下，不向HTML添加太多/任何东西？

谢谢！当你有两个，因为你周围建造和tab_nav任何一个选项卡改变了你操作tab_nav它操作两套时间的解决方案

亚历

Answer 1

试试这个代码

$('.tabs').each(function(){ 
var tab = $(this); 
tab.find('.tab_content').hide(); // Hide all divs 
tab.find('.tab_content:first').show(); // Show the first div 
tab.find('ul.tab_nav li:first').addClass('current_tab'); // Set the class of the first link to active 

tab.find('ul.tab_nav li a').click(function(){ //When any link is clicked 
    tab.find('ul.tab_nav li a').removeClass('current_tab'); // Remove active class from all links 
    tab.addClass('current_tab'); //Set clicked link class to active 

    var currentTab = tab.find($(this).attr('href')); // Set variable currentTab to value of href attribute of clicked link 

    tab.find('.tab_content').hide(); // Hide all divs 
    $(currentTab).show(); // Show div with id equal to variable currentTab 
    return false; 
}); 
}) 

Answer 2

您的代码不起作用。你需要使你的ID唯一，并更新你的代码来找到最接近的ul.tab_nav并从那里约束你的代码。我建议你看看使用jQuery选项卡。

下面的解决方案将工作（Working Example）：

<div class="box tabs"> 
    <div class="box_header"> 
    <h2>3/4 Width</h2> 
    <ul class="tab_nav"> 
     <li><a href="#tab1" class="current_tab">Tab #1</a></li> 
     <li><a href="#tab2">Tab #2</a></li> 
     <li><a href="#tab3">Tab #3</a></li> 
     <li><a href="#tab4">Tab #4</a></li> 
    </ul> 
</div> 
<div class="box_content tab_content" id="tab1">1</div>  
<div class="box_content tab_content" id="tab2">2</div> 
<div class="box_content tab_content" id="tab3">3</div> 
<div class="box_content tab_content" id="tab4">4</div> 
</div> 



<div class="box tabs"> 
    <div class="box_header"> 
     <h2>Take 2</h2> 
     <ul class="tab_nav"> 
      <li><a href="#tab11" class="current_tab">Tab #1</a></li> 
      <li><a href="#tab21">Tab #2</a></li> 
      <li><a href="#tab31">Tab #3</a></li> 
      <li><a href="#tab41">Tab #4</a></li> 
     </ul> 
    </div> 
    <div class="box_content tab_content" id="tab11">11</div> 
    <div class="box_content tab_content" id="tab21">21</div> 
    <div class="box_content tab_content" id="tab31">31</div> 
    <div class="box_content tab_content" id="tab41">41</div> 
</div> 




$('.tabs .tab_content').hide(); // Hide all divs 

$('.current_tab').each(function(){ 
     $($(this).attr('href')).show(); //show the div that is selected      
    } 
); 

$('.tabs ul.tab_nav li a').click(function(){ //When any link is clicked 
    var current_tab = $(this).closest('.tab_nav').find('.current_tab'); 
    $($(current_tab).attr('href')).hide(); //hide the div that was selected 
    current_tab.removeClass('current_tab'); //remove the selected class 
    $(this).addClass('current_tab'); //Set clicked link class to active 
    $($(this).attr('href')).show(); //show the selected class 
    return false; 
}); 

显然上面可以更清洁了，你可以创建这样做，你不违反DRY隐藏DIV的功能。