jQuery UL Tabs 重复导航？

Question

我有一个 jQuery ul 基本选项卡设置好.. (this one)

是否可以复制主标签导航？为了说它在底部的样式不同？

虽然与主选项卡导航相同，但选择具有活动类的不同选项卡等。

只是分开，所以 2 个导航可以控制许多选项卡内容区域。

可能吗？

感谢您的帮助:)

Answer 1

虽然您可以克隆实际的导航栏（见下文），但插件会缓存锚标记，因此克隆的导航无法完全正常工作。

一种可能的解决方案是通过克隆锚点（没有事件和数据，只有标记）来创建新导航，并在单击这些锚点以更改选项卡时调用“select”方法：

$( "#tabs" ).tabs({
    create: function(e, ui) {
        var bottomNav = $('<div class="ui-tabs-nav bottom" />').appendTo(this);
        $(this).find('.ui-tabs-nav a')
            .clone()
            .click(function() {
                $( "#tabs" ).tabs('select', $(this).index());
            }).appendTo(bottomNav);
    }
});​

DEMO

---

是的，你可以。您可以使用创建选项卡标记时触发的create event。使用 .clone(true, true) 和 .ui-tabs-nav 元素进行深度克隆（包含数据和事件）并附加到选项卡容器（您可以使用 css 更改样式）：

$( "#tabs" ).tabs({
    create: function(e, ui) {
        var tabsNav = $(this).find('.ui-tabs-nav').clone(true, true);
        tabsNav.appendTo(this);
    }
});​