jQuery UL Tabs重复导航? [英] jQuery UL Tabs duplicate navigation?

问题描述

我对jQuery ul的基本选项卡进行了很好的设置.(这一个)

I have a jQuery ul basic tabs set up fine.. ( this one )

是否仍然可以复制主标签导航?出于说底部有不同样式的目的?

Is there anyway to duplicate the main tab navigation? For the purpose of say having it at the bottom styled differently?

虽然与主标签导航相同，但选择了具有活动类的其他标签.

Works the same as the main tab nav though, selects a different tab has an active class etc.

只是分开，所以2个导航控制一个选项卡内容区域.

Just separate, so 2 navs that control one lot of tab content areas.

可能吗?

感谢您的帮助:)

推荐答案

尽管您可以克隆实际的导航栏(请参见下文)，但该插件会缓存锚标记，因此克隆的导航无法完全正常工作.

I though you could clone the actual navigation bar (see below) but the plugin caches the anchor tags so the cloned navigation does not fully work.

一种可能的解决方案是通过克隆锚点(不包含事件和数据，仅包含标记)来创建新的导航，然后调用"

A possible solution is to create a new navigation by cloning the anchors (without events and data, just the markup) and call the "select" method when clicking those anchors to change the tabs:

$( "#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

是的，可以.您可以使用创建标签页标记后触发的创建事件 .使用 .clone(true，true) .ui-tabs-nav元素并附加到tabs容器(您可以使用css更改样式):

Yes you can. You can use the create event that is fired when the markup for the tabs has been created. Make a deep clone (with data and events) with .clone(true, true) the .ui-tabs-nav element and append to the tabs container (you can use css to change the styling):

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

这篇关于jQuery UL Tabs重复导航?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！