1 
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.

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

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

标签问题 看看每个选项卡集如何不能一起工作并且可以单独选择？

一组工作标签的代码

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以分别链接到其中的每个 div #container。我页面左侧的这组选项卡有效！

困难的部分

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

我想要第二个<div class="navigation nav-right">——注意 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>

最后的想法

我宁愿希望不必编写自己的 jQuery Tabs 函数，fadeIn()并且fadeOut()- 我能做些什么来完成这项工作？

4

1 回答 1

0

根据供应商的说法.tabs()- 他“不会被打扰”更新链接到同一 DIV 集的多个选项卡实例。

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

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

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

于 2013-02-21T12:30:32.110 回答