jQuery UI Tabs-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创建的，并且从DB检索数据并循环创建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。

如果您还有其他问题，请务必发表评论，我们将尝试解决。