Javascript jQuery工具选项卡：多个不同的实例

使用，我尝试实例化选项卡的多个实例，使用几次调用

.tabs（）

在官方文档中，他们有创建多个选项卡实例的示例(http://flowplayer.org/tools/demos/tabs/multiple.html). 然而，这里基本上是相同选项卡/窗格设置的多个副本，外观、css和html（基本上）都相同

我当前的设置如下所示：

$("#tabs-1").tabs("#panes-1 > .pane-1");
$("#tabs-2").tabs("#panes-2 > .pane-2");

HTML:

表1
等


表1
等

窗格内容
等
…等（更多窗格-1窗格）

我想要的是选项卡功能，用于两组不同的选项卡和窗格；在DOM位置和外观上彼此不同，一个嵌套在另一个中

上述示例中的每个函数本身都可以正常工作。如果两者都被调用，则只有一个选项卡实例有效（以第一个为准），而第二个则无效

---

我做错了什么？

请尝试执行此页面上的演示：

<ul id="tabs-1">
  <li>tab 1</li>
  ...etc
</ul>

<div id="panes-1">
  <div class="pane-1">
     <ul id="tabs-2">
      <li>tab 1</li>
      ...etc
    </ul>
    <div id="panes-2">
      <div class="pane-2">Pane Content</div>
      ...etc
    </div>
  </div>
  ...etc (more .pane-1 panes)
</div>