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

【问题标题】：jQuery UI Tabs - Multiple instances linking to same DIV setjQuery UI 选项卡 - 链接到同一个 DIV 集的多个实例
【发布时间】：2013-02-13 10:54:37
【问题描述】：

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.

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

问题是使用nav 类设置两个 ul 会导致冲突，因此可以同时选择两个选项卡：一个在左侧，一个在右侧。

看看每个选项卡集如何不能协同工作并且可以单独选择？

一组工作标签的代码

HTML

<div id="content">
    <!-- Tab data gets inserted here -->
    <div id="overlay"><div class="overlay"></div></div>

    <!-- First Tab Set -->
    <!-- NOTE: This will appear on the left -->
    <div class="navigation nav-left">
        <ul class="nav">
            <li>Link1</li>
            <li>Link2</li>
        </ul>
   </div>

   <!-- Data for the tabs - this works! -->
   <div id="container">
       <!-- Link 1 Tab -->
       <div>This is data for Link 1</div>
       <div>This is data for Link 2</div>
   </div>
</div>

jQuery

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

如你所见，上面的 jQuery 为 ul.nav 设置了标签，分别链接到 #container 中的每个 div。我页面左侧的这组标签有效！

困难的部分

如何更改此设置以允许在我的页面上使用两组组标签？

我想要第二个<div class="navigation nav-right"> -- 注意右导航以将这些选项卡放在页面的右侧。

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

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

HTML

    <!-- First Tab Set -->
    <!-- NOTE: This will appear on the left -->
    <div class="navigation nav-left">
        <ul class="nav">
            <li>Link1</li>
            <li>Link2</li>
        </ul>
   </div>

   <!-- Second Tab Set (Attempt) -->
   <!-- NOTE: I want nav-right here -->
   <div class="navigation nav-right">
        <ul class="nav">
            <li>Link1</li>
            <li>Link2</li>
        </ul>
   </div>

   <!-- Data for the tabs -->
   <div id="container">
       <!-- Link 1 Tab -->
       <div>This is data for Link 1</div>
       <div>This is data for Link 2</div>
       . . .
       <div>This is data for Link 5</div>
   </div>

最后的想法

我宁愿不必用fadeIn() 和fadeOut() 编写自己的jQuery Tabs 函数——我能做些什么来完成这项工作？

【问题讨论】：

如果您不想自己编写代码，何不向.tabs() 的供应商提出客户支持/功能请求？

标签： jquery jquery-ui jquery-ui-tabs

【解决方案1】：

根据.tabs() 的供应商的说法，他“不会为更新链接到同一个 DIV 集的多个选项卡实例而烦恼”。

我唯一的选择是滚动我自己的代码，完全取消 .tabs()，并在一个大型函数调用中执行我自己的 .fadeOut()、.fadeIn() 和 .load() 函数。

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

如果所有者确实决定包含此功能，我将更新我的帖子，但截至 2013 年初，目前还没有办法以这种方式使用 .tabs() 插件。

【讨论】：