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移到#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");

Working example here

Jquery ui tab问题

2 个答案: