Question

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会导致冲突，因此可以同时选择两个选项卡：一个在左侧，一个在右侧。

Tabs Problem 查看每个标签集如何不一起工作，可以单独选择吗？

有效的单一标签集的代码

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函数 - 我该怎么做才能使其工作？

Answer 1

根据.tabs()的供应商 - 对于链接到同一DIV集的多个标签实例进行更新，他“不会被打扰”。

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

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

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

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

1 个答案: