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。

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

2 个答案: