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 添加太多/任何内容？

谢谢！

亚历克斯

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

当您有两个时，您的代码不起作用，因为您围绕 tab_nav 构建了解决方案，并且任何时候选项卡更改时，您都会操纵 tab_nav 来操纵这两个集合。您需要使您的 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;
});

显然以上内容可以进一步清理，您可以创建一个隐藏 div 的函数，这样您就不会违反 DRY。