0

我正在尝试使两个 jquery UI 选项卡保持同步。您可以在主页上查看选项卡。基本上，当单击休斯顿时，应该单击另一个休斯顿选项卡，奥斯汀也是如此。

这是我所做的（由于它非常慢，我现在已经删除了代码）：

jQuery(document).ready(function(){
    jQuery("a[href='#houston']", ".wp-tabs").on("click", function(){
        jQuery("a[href='#houston_locations']", ".wp-tabs").click();
    });

    jQuery("a[href='#austin']", ".wp-tabs").on("click", function(){
        jQuery("a[href='#austin-3']", ".wp-tabs").click();
    });

    jQuery("a[href='#houston_locations']", ".wp-tabs").on("click", function(){
        jQuery("a[href='#houston']", ".wp-tabs").click();
    });

    jQuery("a[href='#austin-3']", ".wp-tabs").on("click", function(){
        jQuery("a[href='#austin']", ".wp-tabs").click();
    });
});

我上面的代码有效；但是它非常慢，并且在控制台中也出现了“递归过多”的错误。

其他人可以提供更好的解决方案吗？

4

2 回答 2

0

每当您单击其中一个休斯顿选项卡时，它会触发第二个休斯顿选项卡的单击事件，该事件会触发第一个休斯顿选项卡的单击事件，甚至会触发第二个休斯顿选项卡的单击事件，依此类推。这就是您的错误控制台所指的“递归过多” - 因为这将继续发生，直到浏览器决定它已经足够了（这就是它运行缓慢的原因）。

为了解决这个问题，我会将每个选项卡的主要点击方法分成单独的函数，并在每个点击事件中调用这两个函数。

希望有帮助

于 2013-05-22T16:24:12.193 回答
0

我希望你可以试试

jQuery(document).ready(function(){
jQuery("a[href='#houston']", ".wp-tabs").on("click", function(){
    $("a[href='#houston_locations']", ".wp-tabs").trigger("click");
});

jQuery("a[href='#austin']", ".wp-tabs").on("click", function(){
    jQuery("a[href='#austin-3']", ".wp-tabs").trigger("click");
});

jQuery("a[href='#houston_locations']", ".wp-tabs").on("click", function(){
    jQuery("a[href='#houston']", ".wp-tabs").trigger("click");
});

jQuery("a[href='#austin-3']", ".wp-tabs").on("click", function(){
    jQuery("a[href='#austin']", ".wp-tabs").trigger("click");
});

});

于 2013-04-25T16:49:03.077 回答