0

我试图使用 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-->

4

2 回答 2

0

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

于 2012-12-26T00:54:04.687 回答
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

于 2014-09-05T18:21:51.743 回答