Hi,
I’m trying to put together a multi-level jQuery tabbed navigation system on a page.
i.e. 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.