jquery - 如何在 jQuery UI 选项卡中初始化选项卡式容器外部的选项卡式内容？

Question

是否可能，如果可以，您将如何在选项卡容器元素之外初始化选项卡式内容？

文档都将选项卡和选项卡内容包含在同一容器中，例如:

<div id="tabs">
    <ul>
        <li><a href="#tab1">Tab 1</a></li>
        <li><a href="#tab2">Tab 2</a></li>
        <li><a href="#tab3">Tab 3</a></li>
    </ul>
    <div id="tab1">
        Tab 1 content
    </div>
    <div id="tab2">
        Tab 2 content
    </div>
    <div id="tab3">
        Tab 3 content
    </div>
</div>

但是，对于我正在开发的项目，导航和选项卡内容并不位于同一个容器中，因此:

<nav id="tabs">
    <ul>
        <li><a href="#tab1">Tab 1</a></li>
        <li><a href="#tab2">Tab 2</a></li>
        <li><a href="#tab3">Tab 3</a></li>
    </ul>
</nav>
...
<article>
    <section id="tab1">
        Section 1 content
    </section>
    <section id="tab2">
        Section 2 content
    </section>
    <section id="tab3">
        Section 3 content
    </section>
</article>

Answer 1

查看tabs的源码(行 228 和 233 )，如果没有某种“黑客”，比如像 William Niu 建议的那样克隆导航，或者将导航和面板包含在一个公共(public)容器中，等等，似乎不可能做到这一点。 tabs 的迭代会查找父元素内的选项卡面板；即它使用 find()。

但我仍然希望您可以使用通用容器，看起来您可以将导航(和面板)放置在容器内的任何位置( L215 )，并且接下来不必放置容器导航或面板或附近，例如实际的选项卡元素可以位于容器深处。

更新:现在有一个官方方法可以做到这一点:http://bugs.jqueryui.com/ticket/7715