Многоуровневые вкладки jQuery: ссылки вторичного уровня, не открывающие связанную секцию вкладки

Question

Я пытаюсь создать многоуровневую навигационную систему jQuery с вкладками на странице.

i.e Ссылка 1 | Ссылка 2

Если вы наведите курсор мыши на 'Link 2', следующий будет отображать:

Ссылка 1 | Ссылка 2 Ссылка 2 Ссылка 1 | Ссылка 2 Ссылка 2

Нажав на ссылку «Link 2's Link 1» или «Link 2's Link 2», вы попадете в этот раздел с вкладками страницы; обратите внимание, что это не приводит к новому запросу страницы, так как содержимое любой из этих ссылок ранее было скрыто, поскольку выбранная в данный момент вкладка - это «Ссылка 1», и поэтому просто становятся видимыми на этом этапе.

Код следующее (примечание: упрощены для краткости):.

<span id="form" class="tabs"> 
<div>   
<ul>    
<li><a href="#blog">Blog</a></li>    
<li><a href="#links">Links</a> 
    <ul id="links-tabs-list">        
    <li><a href="#links_add">Add</a></li> 
    <li><a href="#links_manage">Manage</a></li> 
    </ul> 
    </li> 
    <li><a href="#images">Images</a></li> 
    <li><a href="#more">More..</a></li> 
</ul> 
</div> 

<div id="blog"> // content goes here.. </div> 
<div id="links"> 
    <div id="links_add"> // content goes here </div> 
    <div id="links_manage"> // content goes here </div>   
</div> 
<div id="images"> // content goes here.. </div> 
<div id="more"> // content goes here.. </div> 
</span> 

Вкладки JQuery устанавливаются с помощью, $ (». Вкладки) вкладки(), и работает отлично. Кроме того, CSS также корректно работает с ссылками «Добавить» и «Управление» для раздела «Ссылки», отображаемым только тогда, когда «Ссылки» зависают. Однако, когда он зависает, нажатие на «Добавить» или «Управление» не отображает div-ссылки «links_add» или «links_manage». Однако нажатие на любую другую ссылку вкладки верхнего уровня (например, «Изображения» или «Дополнительно») приводит к отображению правильной области вкладок. Надеясь, что кто-то может сообщить мне, что мне нужно сделать, чтобы нажимать на любую из ссылок вторичного уровня вкладки, чтобы открыть связанный раздел содержимого вкладки для открытия.

Надеюсь, что я был чист! Буду признателен за любую оказанную помощь.

UPDATE

Извините, ребята, за предполагая, что CSS не требуется исследовать решение. Здесь для вкладок, имея в виду, я в курсе (и в настоящее время не беспокоили) с расположением на-зависании второго уровня вкладок):

.tabs ul { list-style-type: none; padding-left: 0; width: 100%; } 
.tabs ul li { display: inline; } 
.tabs ul li.final { margin-right: 0px; } 
.tabs .ui-tabs-selected a, .tabs .ui-tabs-selected a:hover { cursor: text; text-decoration: none; } 
.tabs ul li, .tabs ul li a { color: #DEDEDE; margin-right: 8px; } 
.tabs ul li a { text-decoration: none; } 
.tabs ul li a:hover { color: #e07979; } 
.tabs .ui-tabs-selected a, .tabs .ui-tabs-selected a:hover{ color: #C24B4B; } 
.tabs ul li ul { display: none; } 
.tabs ul li:hover ul, .tabs ul li.hover ul { position: absolute; display: inline; left: 0; width: 100%; margin: 0; padding: 0; } 
.tabs ul li:hover li, .tabs ul li.hover li { float: left; } 
.tabs ul li:hover li a, .tabs ul li.hover li a { color: #000; } 
.tabs ul li li a:hover { color: #357; } 
.ui-tabs-hide { display: none; } 

Что касается JS, я не использую пользовательских JQuery реализации вкладок, и поэтому только (соответствующие) JS я использую это:

$(function(){ 

    $('.tabs').tabs();$('.tabs').tabs(); 

}); 

Если есть что-нибудь еще нужно, пожалуйста, дайте мне знать, и извинения заранее, если есть!

Answer 1

Вы делаете это неправильно! многоуровневые вкладки напрямую не поддерживаются jQuery, вот трюк:

<span id="form" class="tabs"> 
<div>   
<ul>    
<li><a href="#blog">Blog</a></li>    
<li><a href="#links">Links</a> 
    </li> 
    <li><a href="#images">Images</a></li> 
    <li><a href="#more">More..</a></li> 
</ul> 
</div> 

<div id="blog"> // content goes here.. </div> 
<div id="links" class="tabs"> 
    <ul id="links-tabs-list">        
    <li><a href="#links_add">Add</a></li> 
    <li><a href="#links_manage">Manage</a></li> 
    </ul> 
    <div id="links_add"> // content goes here </div> 
    <div id="links_manage"> // content goes here </div>   
</div> 
<div id="images"> // content goes here.. </div> 
<div id="more"> // content goes here.. </div> 
</span>