JQuery вкладки внутри вкладки не отображаются правильно

Question

У меня есть пользовательский код яваскрипта для вкладок, которая работает хорошо, но Im пытаются поставить детей вкладки внутри, как показано здесь:

<div id="tabs" style="position:relative; "> 
      <ul id="nav"> 
       <li><a href="#prizes">Prizes</a></li> 
       <li><a href="#basket">Your sack</a></li> 
       <li><a href="#order-history">Order History</a></li> 
      </ul> 

      <div id="tab-prizes" class="tab"> 
       <?php include('prizes.php');?> 
      </div> 

А потом в prizes.php файле:

<div id="tabsprizes" style="position:relative; "> 
      <ul id="nav1"> 
       <li><a href="#branded">Weber Branded</a></li> 
       <li><a href="#for-him">For Him</a></li> 
      </ul> 

      <div id="tab-branded" class="tab"> 

       <?php echo "fgdsd"; ?> 

      </div> 

Мне бы хотелось, чтобы они переходили на вкладку «Призы», и внутри нее есть еще один набор вкладок, которые они могут использовать только на этой странице. При нажатии на дочерние вкладки на данный момент все содержимое исчезает. Вот мои JS:

$("#parenttabs #nav a").click(function() { //Parent Tabs Click Function 
    var hash = this.getAttribute("href"); 
    if (hash.substring(0, 1) === "#") { 
     hash = hash.substring(1); 
    } 

    location.hash = hash; 
    showTab(hash); 

    return false; 
}); 

function showTab(hash) { 
    $("div.tab").hide(); 
    $("#tab-" + hash).fadeIn(); 
} 

Извините за весь код, точно не знаю, что показать:/

Благодаря

Answer 1

Взглянув на JQuery UI tabs documentation, я не вижу никаких ссылок на вкладке в -tab функциональность. Предполагая, что вы используете JQuery UI.

Here's an example разметка JQuery UI вложенные вкладки. Изучите его, и вы сможете узнать, почему ваш код не работает должным образом.

Я предлагаю вам взглянуть на JQuery tools, так как он делает открыто поддерживает вкладку «tab-in-tab».

Here's an example инструментов JQuery вложенных разметки вкладки и скрипта.

Answer 2

Если вы используете jQuery UI, не должно быть проблем с вложенными вкладками. Просто убедитесь, что элементы используют уникальный идентификаторы

<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">First Tab</a></li> 
     <li><a href="#tabs-2">Second Tab</a></li> 
    </ul> 
    <div id="tabs-1"> 
     <p>Nothing to show..</p> 
    </div> 
    <div id="tabs-2"> 
     <p>Tabs in tab!</p> 
     <div id="more-tabs"> 
      <ul> 
       <li><a href="#nested-tabs-1">Child Tab 1</a></li> 
       <li><a href="#nested-tabs-2">Child Tab 2</a></li> 
      </ul> 
      <div id="nested-tabs-1"><p>Content here...</p></div> 
      <div id="nested-tabs-2"><p>More content here...</p></div> 
     </div> 
    </div> 
</div> 

jsFiddle example