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建议的那样，或包含公共容器内的导航和面板等。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/。

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

3 个答案: