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?

Спасибо!

Alex

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;
});
})

1004 *

Answer 2

Ваш код не работает, когда у вас их два, потому что вы строили свое решение на tab_nav и каждый раз, когда вкладка изменяется, вы манипулируете tab_nav, который манипулирует обоими наборами.Вы должны сделать свой идентификатор уникальным и обновить свой код, чтобы найти ближайший ul.tab_nav и ограничить ваш код оттуда.Я предлагаю вам изучить использование вкладок jQuery.

Приведенное ниже решение будет работать ( Рабочий пример ):

<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.