Как сделать работу вложенной вкладкой вкладки jquery?

Question

У меня проблема с пользовательскими интерфейсами JQuery.

<script type="text/javascript"> 
$(document).ready(function() { 
    $('.tabs').tabs(); 
    $('.subtabs').tabs(); 
}); 

<div class="tabs"> 
    <ul> 
     <li><a href="#tab1">Tab1</a></li> 
     <li><a href="#tab2">Tab2</a></li> 
    </ul> 
     <div id="tab1"> 
      <div class="subtabs"> 
       <ul> 
        <li><a href="#subtab1">Subtab1</a></li> 
        <li><a href="#subtab2">Subtab2</a></li> 
       </ul> 
      <div id="subtab1"> 
       Some content1 
      </div> 
      <div id="subtab2"> 
       Some content2 
      </div> 
      </div> 

     </div> 
     <div id="tab2"></div> 
</div> 

Теперь, когда я пытаюсь получить доступ к подвкладке как page.html # subtab1 это не работает, но page.html # tab1 работает. Что я делаю не так? в основном мне нужно открыть субтитры, используя URL.

Благодаря

Answer 1

У вас не хватает <div id="tab2"></div>, который даст исключение JQuery. Попробуйте добавить это код и ваши ссылки будут работать.

Answer 2

У меня была та же проблема. И я нашел исправление JS для него. Обратите внимание, что в вашем примере у вас были подписи на первой вкладке, первая вкладка - это вкладка по умолчанию, которая открывается. С моим исправлением вы можете поместить субтитры внутри любого содержимого главной вкладки. Проверьте рабочий план Plunker.

http://run.plnkr.co/plunks/Wr91Bm/#subtab2

Я создал функцию openParentTab() и назвал это право после того, как я создал $('.tabs, .subtabs').tabs();

function openParentTab() { 
    locationHash = location.hash.substring(1); 
    console.log(locationHash); 
    // Check if we have an location Hash 
    if (locationHash) { 
     // Check if the location hash exsist. 
     var hash = jQuery('#'+locationHash); 
     if (hash.length) { 
      // Check of the location Hash is inside a tab. 
      if (hash.closest(".tabContent").length) { 
       // Grab the index number of the parent tab so we can activate it 
       var tabNumber = hash.closest(".tabContent").index(); 
       jQuery(".tabs.fix").tabs({ active: tabNumber }); 
      } 
     } 
    } 
} 

Если у вас есть большая страница, и вы найдете фокус не находится на правильном вложенном вы можете добавить следующий ниже jQuery(".tabs.fix").tabs({ active: tabNumber });

hash.get(0).scrollIntoView(); 
setTimeout(function() { 
    hash.get(0).scrollIntoView(); 
}, 1000); 

См код: http://plnkr.co/Wr91Bm