jQuery UL Tabs duplicate navigation?

问题

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.

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

Possible?

Thanks for any help :)

回答1:

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

---

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);
    }
});​

来源：https://stackoverflow.com/questions/9907619/jquery-ul-tabs-duplicate-navigation