如何在 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< 的源代码/code>（行 228 和 233），似乎不可能这样做不需要某种“黑客”，比如像 William Niu 建议的那样克隆导航，或者包含两者tabs 的当前迭代会查找父元素内的选项卡面板；即它使用find()。

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

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

Answer 2

我不知道这是否适合您，但一种解决方案是访问包含两者的元素。

例如

$( "#tabs").parent().tabs();

看看这个 fiddle

Answer 3

如果您只是希望它对用户具有这种外观，您可以将导航栏克隆到其他位置并删除原始导航栏。

$('#tabs').tabs();

// clone the navigation bar and put it in the placeholder
var copy = $('#tabs').clone(true).attr('id', 'placeholder');
copy.find('div.ui-tabs-panel').remove();
$('#placeholder').replaceWith(copy);

// remove the original navigation bar
$('#tabs > ul').remove();

$('#placeholder li > a').click(function() {
    $(this).parent().siblings().removeClass('ui-tabs-selected ui-state-active');
});

查看实际操作：http://jsfiddle.net/william/QAJ2Z/1/。