带有cookie支持的jquery选项卡在页面刷新后恢复错误的选项卡位置

我有个棘手的问题,我不能完全理解。它是支持cookie的jquery选项卡。我有以下代码:

$(document).ready(function() {
var $tabs = $("#tabs").tabs();

$tabs.tabs('select', $.cookie("tabNumber"));

$('#tabs ul li a').click(function() {
    $.cookie("tabNumber", $tabs.tabs('option', 'selected'));
});

$('#btnSelect').click(function() {
    //alert($.cookie("tabNumber"));
    //$tabs.tabs('select', 2);
    $tabs.tabs('select', $.cookie("tabNumber"));
});
});

所以,我在名为“tabs”的DIV中有3个标签(位置为0,1,2)。当用户选择一个标签时,标签位置存储在cookie中。之后,如果用户刷新页面,则必须还原活动选项卡位置。

但每次刷新页面时,我都会在上一个位置获得活动标签(如果我选择第二个标签,那么在刷新之后,我会在位置1获得活动标签,等等)。 我在代码中添加了一些测试(button btnselect with onclick handler,它复制了加载位置功能)。 所以,如果我取消注释并使用

$tabs.tabs('select', 2);

然后单击“选择”后,我就得到了正确的位置。好的,没错。然后我对该行进行注释,并取消对下一行的注释:

alert($.cookie("tabNumber"));

所以,我选择选项卡,单击按钮,获取对话框消息“2”,然后在位置1中的选项卡变为活动状态。 为什么?在这两种情况下,我用参数2调用“select”方法…

我知道我可以为选项卡使用别名,但我想解释一下为什么我的代码不能正常工作。