多级jQuery标签：二级链接未打开关联的标签部分

Question

I'm trying to put together a multi-level jQuery tabbed navigation system on a page.

ie Link 1 | Link 2

If you hover over 'Link 2', the following would display:

Link 1 | Link 2 Link 2's Link 1 | Link 2's Link 2

Clicking on either 'Link 2's Link 1' or 'Link 2's Link 2' will take you to that tabbed section of the page; please note this doesn't result in a new page request, as the content of either of those links were previously hidden as the currently selected tab is 'Link 1', and so just become visible at this point.

The code is the following (note: streamlined for brevity):

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

The jQuery tabs are set using, $('.tabs').tabs(), and working fine. Additionally, the CSS is also working correctly with 'Add' and 'Manage' links for the 'Links' section displaying only when 'Links' is hovered. However, when it is hovered, clicking on either 'Add' or 'Manage' doesn't show the 'links_add' or 'links_manage' id divs. Clicking on any other top-level tab link (such as 'Images' or 'More'), however, results in the correct tabbed section being displayed. Hoping someone can let me know what I need to do in order to get clicking on any of the secondary tab level links to result in the associated tab content section to open.

Hope I've been clear! Any help is much appreciated.

UPDATE

Sorry guys for assuming the CSS isn't needed to investigate a solution. Here it is for the tabs, keeping in mind I'm aware (and not currently bothered) with the on-hover location of the second tab level):

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

As for the JS, I'm not using a custom jQuery tabs implementation, and so the only (relevant) JS I'm using is:

$(function (){

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

});

If there's anything else needed, please let me know and apologies in advance if there is!

Answer 1

You're doing it wrong! multilevel tabs are not directly supported by jquery, here is the trick:

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