jQuery UI标签问题

Question

我正在使用jquery UI tabs并想知道，是否可以指向不存在于div的id

main tab div容器，表示

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">tab1</a></li>
        <li><a href="#tabs-2">tab2</a></li>
        <li><a href="#outerdiv">tab3</a></li>
    </ul>
    <div id="tabs-1">
        <p>Tab 1</p>
    </div>
    <div id="tabs-2">
        <p>Tab 2</p>
    </div>
</div>

<div id="outerdiv">
        <p>Tab 3</p>
    </div>

我尝试了此操作，但单击tab3时div#outer内容未打开。 我怎样才能做到这一点？

Answer 1

我相信默认的jQuery插件正在查找您的元素不是的$(this).find("#outerdiv") （其中this = #tabs ）。

有很多方法可以#outerdiv起作用，但是我认为最简单的事情是将#outerdiv移到#tabs 。

如果您坚持保持标记不变，则可以像下面这样使用load方法：

$("#tabs").tabs({
 load: function (event, ui) {
    switch (ui.index) {
       case 2:
           $("#tabs div").hide();
           $("#outerdiv").show();
           break;
    }
}
});

但是我不知道这将如何影响其余的选项卡面板。 您可能必须将它们全部添加到此开关功能中。

Answer 2

您可以在初始化选项卡之前使用.appendTo()移动div ：

$("#outerdiv").appendTo("#tabs");

这里的工作示例