jQuery UI 选项卡 - cookie 和选择刚刚添加的选项卡之间的冲突？

Question

我正在使用jquery.cookies 在刷新后保持选中标签。

我也希望在创建新标签后立即将其选中。

使用我目前拥有的 jQuery UI 指令：

    var cookieName = 'stickyTab';

    $(".tabs").tabs({
        fx: {
            opacity: 'toggle',
            duration: 'fast'
        },
        selected: ( $.cookies.get( cookieName ) || 0 ),
                    select: function( e, ui )
                {
                $.cookies.set( cookieName, ui.index );
                }
    });

    var $tabs = $('.tabs').tabs({
    add: function(event, ui) {
        $tabs.tabs('select', '#' + ui.panel.id);
    }
});

不幸的是，这不起作用——当我创建一个新选项卡时，之前打开的选项卡仍然处于选中状态（可能是因为 cookie 覆盖了select 函数？

我的标签是通过 PHP POST 创建的，数据从数据库中检索并循环创建 LI 和 DIV 元素。 （即，我的标签不是直接从 JS 创建的）。

有人有解决此问题的建议吗？

谢谢！

Answer 1

您的错误源于您仅通过 JavaScript 更新 cookie，但在页面重新加载时通过 PHP 添加新选项卡。这会导致新选项卡被附加但不与您的 cookie 同步。

由于 jQuery UI Tabs selected 属性是一个索引。你的标签是通过一个数组创建的，很简单：

setcookie('stickyTab',count($array)-1);
// this will set the selected tab to the last appended tab

请注意，您只需要在添加新选项卡时运行此语句。否则会覆盖通过JS设置的cookie。

如果您还有其他问题，请务必发表评论，我们会尽力解决。