如何克隆/复制/镜像 jquery 选项卡

Question

我怎样才能制作jquery选项卡，具有完全相同的选项卡 在内容的顶部和底部？

因此，这两个选项卡组合在一起，并相互镜像：

http://jqueryui.com/demos/tabs/ default.html

http://jqueryui.com/demos/tabs/bottom.html

Answer 1

这是对 jQuery 选项卡的彻底破解，但我想不出任何其他方法可以轻松实现这一点。
您只需将样式放在克隆的选项卡上即可。您可以在此处查看实例。

被黑的JavaScript代码如下：

$(function() {

        var myTabs = $("#tabs").tabs();
        var x = $('.ui-tabs-nav').clone().addClass('mySecondTabs');
        $('#tabs').append(x);
        $('.mySecondTabs').tabs();

        $('#tabs').tabs({

            select: function(event, ui) 
            {  
                index = ui.index;
                x = $('.mySecondTabs').children('li:nth-child('+(parseInt(index)+1)+')');
                $('.mySecondTabs').children('li').removeClass('ui-tabs-selected').removeClass('ui-state-active');
                x.addClass('ui-tabs-selected').addClass('ui-state-active');
            }
        });

        $('.mySecondTabs').children('li').click(function () 
        {
            $('#tabs').tabs("select", $('.mySecondTabs').children('li').index(this));
        });


    });

Answer 2

非常简单：

$('#tabs').tabs();    
$('#my-text-link').click(function(){
   $('#tabs').tabs( "option", "active", 1 ); //open the second tab [0,1,2...]
});