jQuery UI选项卡-链接到同一DIV集的多个实例

正如标题所示，我希望在页面上有两个不同位置的选项卡列表，但我希望它们与相同的数据一起工作

$(function() {
    $("ul.nav").tabs("div#container > div", {
    effect: 'fade',
    fadeOutSpeed: "500"});
});

问题是，设置两个具有

nav

类的ul会导致冲突，因此可以同时选择两个选项卡：一个在左侧，一个在右侧

$(function() {
    $("ul.nav").tabs("div#container > div", {
    effect: 'fade',
    fadeOutSpeed: "500"});
});

查看每个选项卡集如何不一起工作，并且可以单独选择

$(function() {
    $("ul.nav").tabs("div#container > div", {
    effect: 'fade',
    fadeOutSpeed: "500"});
});

一组工作标签的代码

$(function() {
    $("ul.nav").tabs("div#container > div", {
    effect: 'fade',
    fadeOutSpeed: "500"});
});

HTML

Note: I want to use .tabs() and avoid NOT using .tabs(), and writing everything 
separately to handle the fades and tab selections like others have found.

$(function() {
    $("ul.nav").tabs("div#container > div", {
    effect: 'fade',
    fadeOutSpeed: "500"});
});

如您所见，上面的jQuery分别为链接到

#container

中的每个div的

ul.nav

设置选项卡。我的页面左侧的这组选项卡可以正常工作

$(function() {
    $("ul.nav").tabs("div#container > div", {
    effect: 'fade',
    fadeOutSpeed: "500"});
});

最难的部分

$(function() {
    $("ul.nav").tabs("div#container > div", {
    effect: 'fade',
    fadeOutSpeed: "500"});
});

如何更改此设置以允许页面上有两组选项卡

$(function() {
    $("ul.nav").tabs("div#container > div", {
    effect: 'fade',
    fadeOutSpeed: "500"});
});

我需要第二个

——注意导航右侧，以便将这些选项卡固定在页面的右侧

$(function() {
    $("ul.nav").tabs("div#container > div", {
    effect: 'fade',
    fadeOutSpeed: "500"});
});

第二组选项卡必须与第一组选项卡一起工作，因此一次只能激活一个选项卡，并取消其他选项卡选择

$(function() {
    $("ul.nav").tabs("div#container > div", {
    effect: 'fade',
    fadeOutSpeed: "500"});
});

导致两个选项卡集并发问题的我的代码

$(function() {
    $("ul.nav").tabs("div#container > div", {
    effect: 'fade',
    fadeOutSpeed: "500"});
});

HTML

Note: I want to use .tabs() and avoid NOT using .tabs(), and writing everything 
separately to handle the fades and tab selections like others have found.

$(function() {
    $("ul.nav").tabs("div#container > div", {
    effect: 'fade',
    fadeOutSpeed: "500"});
});

$(function() {
    $("ul.nav").tabs("div#container > div", {
    effect: 'fade',
    fadeOutSpeed: "500"});
});

链接1
链接2


链接1
链接2

这是链路1的数据
这是链路2的数据
. . .
这是链接5的数据

最后的想法

$(function() {
    $("ul.nav").tabs("div#container > div", {
    effect: 'fade',
    fadeOutSpeed: "500"});
});

---

我很希望不必用

fadeIn（）

和

fadeOut（）

编写自己的jQuery Tabs函数-我能做些什么来实现这一点？

根据

.Tabs（）

的供应商的说法，他“不介意”更新链接到同一DIV集的多个选项卡实例

$(function() {
    $("ul.nav").tabs("div#container > div", {
    effect: 'fade',
    fadeOutSpeed: "500"});
});

我唯一的选择是滚动我自己的代码，完全取消

.tabs（）

并执行我自己的

.fadeOut（）

、

.fadeIn（）

和

.load（）

函数，这些函数组合在一个大型函数调用中

$(function() {
    $("ul.nav").tabs("div#container > div", {
    effect: 'fade',
    fadeOutSpeed: "500"});
});

这样做的好处是，我确切地知道它是如何工作的，并且可以在将来轻松地添加到它中，我建议自己花一点时间（不会花太长时间）来做这件事

$(function() {
    $("ul.nav").tabs("div#container > div", {
    effect: 'fade',
    fadeOutSpeed: "500"});
});

---

如果所有者确实决定包含此功能，我将更新我的帖子，但从2013年初开始，目前还没有一种方法可以以这种方式使用

.tabs（）

插件。

如果您不想自己编写代码，为什么不向

.tabs（）

的供应商提交客户支持/功能请求？

$(function() {
    $("ul.nav").tabs("div#container > div", {
    effect: 'fade',
    fadeOutSpeed: "500"});
});