jQuery 地址子选项卡(嵌套选项卡)(深度链接)
Posted
技术标签:
【中文标题】jQuery 地址子选项卡(嵌套选项卡)(深度链接)【英文标题】:jQuery Address SubTabs (nested tabs) (deep linking) 【发布时间】:2012-12-11 14:09:37 【问题描述】:我正在尝试使用 jquery.addres 插件,让许多父选项卡和许多子选项卡,第一个选项卡工作正常,它显示所有子选项卡,但第二个选项卡不能正常工作,并且在示例页面上它们显示第一个标签有很多子标签,第二个标签有一个简单的内容
这里是示例链接 here
我确实复制了 Jbin 页面 here你会注意到tab2没有子标签,我怎样才能让它工作
这是我的 html,它在第二个选项卡上不起作用,我的猜测是我不应该使用 ID 子选项卡两次,如果我确实将 ID 更改为一个类,并将上面的脚本从“ #" 到 ".",我仍然无法重现第二个标签下的子标签,我相信它一定很容易,但我就是想不通
<div class="page">
<h1>jQuery Address SubTabs</h1>
<div id="tabs">
<ul>
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
</ul>
<div id="tab1">
<p>Tab 1</p>
<div id="subtabs">
<ul>
<li><a href="#tab1-subtab1">SubTab 1</a></li>
<li><a href="#tab1-subtab2">SubTab 2</a></li>
</ul>
<div id="tab1-subtab1">
<p>SubTab 1</p>
</div>
<div id="tab1-subtab2">
<p>SubTab 2</p>
</div>
</div>
</div> <!--end subtab1-->
<div id="tab2">
<p>Tab 2</p>
<div id="subtabs">
<ul>
<li><a href="#tab2-subtab1">SubTab 1</a></li>
<li><a href="#tab2-subtab2">SubTab 2</a></li>
</ul>
<div id="tab2-subtab1">
<p>SubTab 1</p>
</div>
<div id="tab2-subtab2">
<p>SubTab 2</p>
</div>
</div> <!--end subtab2-->
</div> <!--end tab2-->
</div> <!--end tabs-->
【问题讨论】:
演示页面上的 html 不同...在 html 中的Tab2
中没有子选项卡。 ID 一定不能重复...改用类
你可以在这里jsbin.com/uvabux/22/edit#/tab2玩代码,谢谢你的帮助
【参考方案1】:
我最终使用了 jquery 工具,这似乎是最好的选择 http://jquerytools.org/demos/tabs/multiple-tabs.htm 希望它会帮助某人
【讨论】:
【参考方案2】:解决方案在头脑中:
var tabs,
separator = '-',
initialTab = 'tab1',
navSelector = 'ul.ui-tabs-nav a',
tabSelector = '#tabs, #tab1 > #subtabs';
var tabs,
separator = '-',
initialTab = 'tab1',
navSelector = 'ul.ui-tabs-nav a',
tabSelector = '#tabs, #tab1, #tab2 > #subtabs';
看...添加#tab2
【讨论】:
以上是关于jQuery 地址子选项卡(嵌套选项卡)(深度链接)的主要内容,如果未能解决你的问题,请参考以下文章
JQuery选项卡 - 嵌套选项卡问题 - 在初始加载时激活子选项卡
引导 4 个嵌套选项卡:“显示全部”按钮以在子选项卡中显示节点