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>

多级jQuery选项卡：不打开关联选项卡部分的辅助级别链接

1 个答案: