多级jQuery选项卡：二级关联不打开关联选项卡部分

Question

我试图在页面上放置一个多级jQuery选项卡式导航系统。

即链接1 |链接2

如果你将鼠标悬停在 '链接2'，以下将显示：

链接1 |链接2 链接2的链接1 |链接2的链接2

单击“链接2的链接1”或“链接2的链接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才能正常显示'链接'部分的'添加'和'管理'链接。但是，当它悬停时，单击“添加”或“管理”不会显示“links_add”或“links_manage”ID div。然而，点击任何其他顶级标签链接（例如“图片”或“更多”）会导致显示正确的标签部分。希望有人可以让我知道我需要做什么才能点击任何辅助选项卡级别的链接，以导致打开相关的选项卡内容部分。

希望我已经清楚！任何帮助深表感谢。

更新假设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>