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

使用$（'。tabs'）。tabs（）设置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>