Jquery - convert to work with multiple tabs on one page?

问题

I'm using this code for a simple jQuery tab setup:

$('.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;
});

And here's the sample 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>

It works beautifully for one set of tabs, but if I add another set (i.e., another block of code as above) it all messes up - it treats the tabs as one big object, not two seperate tab instances. How can I convert it so that it will work? Ideally without adding much/anything to the HTML?

Thanks!

Alex

回答1:

Try this code

$('.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;
});
})

回答2:

Your code does not work when you have two because you built your solution around tab_nav and any time a tab changes you manipulate tab_nav which manipulates both sets. You need to make your ID's unique, and update your code to find the closest ul.tab_nav and constrain your code from there. I do suggest that you look into using jQuery tabs.

The below solution will work (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;
});

Obviously the above could be cleaned up more, and you could create a function that does hides the div so you dont violate DRY.

来源：https://stackoverflow.com/questions/9244530/jquery-convert-to-work-with-multiple-tabs-on-one-page

标签

jquery

tabs