2

我有一个带有 5 个选项卡（jquery ui）的 PHP 文件。选项卡四和五包含表格。表单和选项卡工作正常 - 期望这一点：我提交表单（POST 方法不是 XHR），然后单击鼠标右键（Firefox 和 IE 行为相同）并选择返回，然后通过鼠标单击输入的页面中选择选项卡五表单数据仍然可用。

我尝试建立一个链接，这对用户来说更方便。

<a href="#" onClick='history.back();$("#tabs").tabs("select","4");'>modify</a>

如果点击我的修改链接，它仍然会跳回到标签一，标签五中的表单字段是空的。

我阅读了几篇关于 jQuery UI 选项卡和后退按钮的文章，但似乎都没有解决我的问题。

我的错在哪里，手动执行此步骤与我与 JS 的链接有什么区别？

4

2 回答 2

2

一旦你离开它正在运行的页面，Javascript 就会停止执行——你的处理程序的后半部分onClick永远不会运行。

于 2012-04-05T15:13:04.920 回答
1

此处的评论之后是一个功能，它将记住您选择的最后一个选项卡。它确实依赖于您使用设置的“返回”按钮。

据我所知，您会发现的问题是您无法拦截单击浏览器后退按钮的用户。我发现在网站上创建一个明显而清晰的后退按钮可以完成这项工作，到目前为止我在我们网站上的反馈似乎支持了这一点。

功能是：

$(function() {
    var $previousTab = 0;
    var $backButtonUsed = false;    

    // Initialise tabs
    $("#tabs").tabs();

    $("#tabs").bind("tabsselect", function(event, ui) {
        if ($backButtonUsed)
        {
            $backButtonUsed = false;
        } else {
            $previousTab = $("#tabs").tabs('option', 'selected');
        }
        return true;
    });

    $("#back").live('click', function() {
        $backButtonUsed = true;
        $("#tabs").tabs({ selected: $previousTab });
        return true;
    });
});​

我还将它包含在JSFiddle中，因此您可以使用 HTML 和 jQuery UI 选项卡查看它的运行情况。

让我知道你的想法。

于 2012-04-05T16:09:46.640 回答