0

我正在尝试在页面上组合一个多级 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 选项卡是使用 $('.tabs').tabs() 设置的，并且工作正常。此外，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();

});

如果还有什么需要的，请告诉我，如果有，请提前道歉！

4

1 回答 1

0

你这样做是错的！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>
于 2012-04-16T09:40:02.470 回答