我需要有两级标签导航。
基本上是这样的:
Tab1 Tab2 Tab3
TabA TabB TabC
例如,当用户单击 Tab2 时,他可以再次从第二级选项卡(TabA、TabB 等)中进行选择。
我可以通过第一关,但我不能通过第二关。我怎样才能把它放在第一级标签中。
最佳答案
只需将第二组选项卡嵌套在您的 html 中的第一组选项卡中,如下所示:
<div id="tabs">
<ul>
<li><a href="#tab-1"><span>One</span></a></li>
<li><a href="#tab-2"><span>Two</span></a></li>
<li><a href="#tab-3"><span>Three</span></a></li>
</ul>
<div id="tab-1">
<p>First tab is active by default.</p>
<p>Second tab contains nested tabs.</p>
</div>
<div id="tab-2">
<!-- Nested Tabs! -->
<ul>
<li><a href="#nested-1"><span>One</span></a></li>
<li><a href="#nested-2"><span>Two</span></a></li>
<li><a href="#nested-3"><span>Three</span></a></li>
</ul>
<div id="nested-1">
Nest tab 1 content: Onerem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy..
</div>
<div id="nested-2">
Nest tab 2 content: Tworem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy..
</div>
<div id="nested-3">
Nest tab 3 content: Threm ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy..
</div>
<!-- End Nested Tabs -->
Regular tab 2 content (optional)
</div>
<div id="tab-3">
<p>Second tab contains multiple tabs.</p>
</div>
</div>
..并像这样在文档就绪时初始化它们:
<script>
$(document).ready(function() {
$("#tabs").tabs();
$("#tab-2").tabs();
});
</script>
如有疑问,请在 http://docs.jquery.com/UI/Tabs 查看 jQuery 选项卡 API 文档
关于jquery - 两级标签 jquery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3042200/