Javascript jqueryui选项卡问题

我使用的是

jqueryui选项卡

，我想知道，有没有可能指向一个在

主选项卡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>

表1

表2

表3

---

我尝试了这个方法，但是当我单击选项卡3时，

div#outer

内容没有打开。我该怎么做呢？

我相信默认的jQuery插件正在查找

$（this）。查找（“#outerdiv”）

（其中

this

=

#tabs

）您的元素不在其中

有很多方法可以实现这一点，但我认为最简单的方法是将

\outerdiv

移动到

\tabs

如果您坚持保持标记不变，则可以使用

load

方法，如下所示：

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

---

但我不知道这将如何影响您的选项卡面板的其余部分。您可能需要将它们全部添加到此开关函数中。

我相信默认的jQuery插件正在查找

$（this）。查找（“#outerdiv”）

（其中

this

=

#tabs

）您的元素不在其中

有很多方法可以实现这一点，但我认为最简单的方法是将

\outerdiv

移动到

\tabs

如果您坚持保持标记不变，则可以使用

load

方法，如下所示：

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

---

但我不知道这将如何影响您的选项卡面板的其余部分。您可能需要将它们全部添加到此切换功能中。

您可以在初始化选项卡之前使用移动

div

：

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

---

您可以在初始化选项卡之前使用移动

div

：

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

---

无需更改源（jquery ui选项卡的源代码）或进行一些修改（使用代码移动

外部

div）。。。。no@ManseUK您不需要编辑jquery ui选项卡的源代码就可以实现这一点，您可以使用

load

方法，但它仍然不是很整洁。@Curt+1在您的答案上-但正如您所说-它不整洁，需要针对不同的情况进行修改…而无需更改（jquery ui选项卡的）源代码或进行一些修改（使用代码移动

outer

div）。。。。no@ManseUK您不需要编辑jquery ui选项卡的源代码就可以实现这一点，您可以使用

load

方法，但它仍然不是很整洁。@Curt+1在您的答案上-但正如您所说-它不整洁，需要针对不同的情况进行修改。。。