Tabs jQuery地址子选项卡（嵌套选项卡）（深度链接）

我试着使用jquery.addres插件，有很多父选项卡和很多子选项卡，第一个选项卡工作正常，它显示了它的所有子选项卡，但第二个选项卡工作不正常，在示例页面上，它们显示了第一个选项卡和许多子选项卡，第二个选项卡有一个简单的内容

下面是示例链接

我确实复制了Jbin中的页面 您会注意到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-->

jQuery地址子选项卡




表1





子选项卡1

子选项卡2

表2





子选项卡1

子选项卡2

---

我最终使用了jquery工具，这似乎是最好的选择 希望它能帮助某人

解决方案在脑海中：

 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

html是不同的…html中的

tab2

中没有子选项卡。ID肯定不能被复制…使用类代替你可以在这里玩代码，谢谢你的帮助