jQuery Address SubTabs(嵌套选项卡)(深层链接)

时间:2012-12-25 19:32:48

标签: tabs nested jquery-address

我试图使用jquery.addres插件,让许多父标签有很多子标签,第一个标签工作正常,它显示所有子标签,但第二个标签不能正常工作,并在示例页面上显示第一个选项卡包含许多子选项卡,第二个选项卡包含简单内容

这是示例链接 here

我确实重现了Jbin页面 here您会注意到tab2没有子标签,我该如何使其正常工作

这是我的HTML在第二个选项卡上不起作用,我的猜测是我不应该使用ID子标记两次,如果我确实将ID更改为类,并从“更改上面的脚本” #“to”。“,我仍然无法在第二个标签下复制子标签,我确信它一定很容易,但我无法弄清楚

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

2 个答案:

答案 0 :(得分:0)

我最终使用了jquery工具,这似乎是最好的选择 http://jquerytools.org/demos/tabs/multiple-tabs.htm 希望它会帮助某人

答案 1 :(得分:0)

解决方案是:

 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