Создание нескольких уровней вкладок

Question

Вот мой JSfiddle: http://jsfiddle.net/sgmkghf4/

Я хочу создать несколько вкладок уровня. На первых вкладках я хочу добавить somme другие уровни вкладок, но вкладки первого уровня закрываются, когда я нажимаю вкладки второго уровня.

Где ошибка?

<!--TABS WRAPPER--> 
<div class="tabs_wrapper"> 
<!-- 2nd new tab design START --> 
    <div id="new2_tabs"> 
     <ul> 
      <li class="active"><a href="#pending" rel="pending">1</a></li> 
      <li><a class="icon" href="#finished" rel="finished">2</a></li> 
      <li><a href="#cancelled" rel="cancelled">3</a></li> 
     </ul> 
    </div> 
    <div id="new2_tabs_content" style="padding:0"> 
     <div id="pending" class="tab_content" style="display: block;"> 
     <!--SECOND TABS--> 
      <div class="tabs_wrapper"> 
      <!-- 2nd new tab design START --> 
       <div id="new2_tabs"> 
        <ul> 
         <li class="active"><a href="#otherone" rel="otherone">1.1</a></li> 
         <li><a class="icon" href="#othertwo" rel="othertwo">1.2</a></li> 
         <li><a href="#otherthree" rel="otherthreed">1.3</a></li> 
        </ul> 
       </div>            
       <div id="new2_tabs_content" style="padding:0"> 
        <div id="otherone" class="tab_content" style="display: block;"> 
         <p>TEST1</p> 
        </div> 
        <div id="othertwo" class="tab_content"> 
         <p>TEST2</p> 
        </div> 
        <div id="otherthree" class="tab_content"> 
         <p>TEST3</p> 
        </div> 
       </div> 
       <!-- 2nd new tab design END --> 
      </div> 
     <!--SECOND TABS--> 
     </div> 
     <div id="finished" class="tab_content"> 
      <p>TEST2</p> 
     </div> 
     <div id="cancelled" class="tab_content"> 
      <p>TEST3</p> 
     </div> 
    </div> 
    <!-- 2nd new tab design END --> 
</div> 

$(document).ready(function(){ 
    // Main function that shows and hides the requested tabs and their content 
    var set_tab = function(tab_container_id, tab_id){ 
     // Remove class "active" from currently active tab 
     $('#' + tab_container_id + ' ul li').removeClass('active'); 

     // Now add class "active" to the selected/clicked tab 
     $('#' + tab_container_id + ' a[rel="'+tab_id+'"]').parent().addClass("active"); 

     // Hide contents for all the tabs. 
     // The '_content' part is merged with tab_container_id and the result 
     // is the content container ID. 
     // For example for the original tabs: tab_container_id + '_content' = original_tabs_content 
     $('#' + tab_container_id + '_content .tab_content').hide(); 

     // Show the selected tab content 
     $('#' + tab_container_id + '_content #' + tab_id).fadeIn(); 
    } 

    // Function that gets the hash from URL 
    var get_hash = function(){ 
     if (window.location.hash) { 
      // Get the hash from URL 
      var url = window.location.hash; 

      // Remove the # 
      var current_hash = url.substring(1); 

      // Split the IDs with comma 
      var current_hashes = current_hash.split(","); 

      // Loop over the array and activate the tabs if more then one in URL hash 
      $.each(current_hashes, function(i, v){ 
       set_tab($('a[rel="'+v+'"]').parent().parent().parent().attr('id'), v); 
      }); 
     } 
    } 

    // Called when page is first loaded or refreshed 
    get_hash(); 

    // Looks for changes in the URL hash 
    $(window).bind('hashchange', function() { 
     get_hash(); 
    }); 

    // Called when we click on the tab itself 
    $('.tabs_wrapper ul li').click(function() { 
     var tab_id = $(this).children('a').attr('rel'); 

     // Update the hash in the url 
     window.location.hash = tab_id; 

     // Do nothing when tab is clicked 
     return false; 
    }); 
}); 

Можете ли вы мне помочь?

Answer 1

У вас очень запутанная разметка, но основная причина, по которой это не работает, заключается в том, что вы используете то же самое id для нескольких элементов (new2_tabs и new2_tabs_content).

Прежде всего, измените идентификаторы на уникальные значения. Затем добавить классы элементов, которые вы хотите стиль, как это:

... 
<div id="new_tabs" class="tabs"> 
... 
    <div id="new_tabs_content" style="padding:0" class="tabs_content"> 

В правилах перезаписи CSS, чтобы использовать классы вместо идентификаторов. Работает demo