jQueryUI - 动态添加具有相同目标的选项卡

Question

我正在使用 jQueryUI 插件，并且我希望有几个引用同一 div 的选项卡（其内容根据所选选项卡是动态的）。

当选项卡是静态的时，它可以工作，例如：

<div id="tabs">
<ul id="tab-links-container">
    <li class="tab-link">
        <a href="#main-tab">One</a>
    </li>     
    <li class="tab-link">
        <a href="#main-tab">Two</a>
    </li>
    <li class="tab-link">
        <a href="#main-tab">Three</a>
    </li>
</ul> 

<div class="tab-body" id="main-tab">
    <span>Here is the shared tabs content</span>
</div>

但是当我尝试动态添加选项卡时，我遇到了一些非常奇怪的行为。我是这样做的：

$("#tabs").tabs("add", "#main-tab", tabTitle);

奇怪的行为如下：

• 第一个选项卡似乎被选中，但我没有看到任何内容（目标 div 为空白）。
• 单击第二个选项卡时，它被选中，显示内容，但第一个选项卡仍然显示为选中状态，并且不可“单击”。
• 只有当选择第三个选项卡时，整个机制才会恢复正常，一切都会恢复正常。

当尝试玩类似的场景时，我遇到了其他错误，例如选项卡（目标）的内容被隐藏，甚至选项卡本身突然被删除。

这适用于 IE7/8 和 Chrome。

还有其他人也遇到过类似的问题吗？这是一个已知的错误还是我在这里遗漏了一些东西？

谢谢，