Question

我正在尝试几个小时才能使我的联系表格正常工作。表单本身有一些选项卡。我正在使用的标签的代码来自此网站http://jqueryfordesigners.com/jquery-tabs/

这是我正在使用的脚本代码：

<script type="text/javascript" charset="utf-8">
    $(function () {
        var tabContainers = $('div.tabs > div');
        tabContainers.hide().filter(':first').show();

        $('div.tabs ul.tabNavigation a').click(function () {
            tabContainers.hide();
            tabContainers.filter(this.hash).show();
            $('div.tabs ul.tabNavigation a').removeClass('selected');
            $(this).addClass('selected');
            return false;
        }).filter(':first').click();
    });
</script>

到目前为止效果很好。根据需要正确显示标签。我使用Modx Revo的FormIt-Package制作的表格也适用！

现在问题...当我点击提交并且验证失败时（例如用户忘记填写必填字段），网站将刷新并且最后选择的选项卡不会显示，页面始终显示第一个标签

我想查看有关验证错误的最后一次访问标签 - ＆gt;页面重新加载。

通过此编辑，我可以通过URL中的哈希标记（选项卡的ID）来实现所需的选项卡（例如www.xyz.com/contact.html?tab=#two):

    <script type="text/javascript" charset="utf-8">
        $(function () {
            var tabContainers = $('div.tabs > div');
            tabContainers.hide().filter(':first').show();

            $('div.tabs ul.tabNavigation a').click(function () {
                tabContainers.hide();
                tabContainers.filter(this.hash).show();
                $('div.tabs ul.tabNavigation a').removeClass('selected');
                $(this).addClass('selected');
                return false;
            }).filter(':first').click();

$(document).ready(function(){
     tabContainers.hide();
     tabContainers.filter(window.location.hash).show();
     $('div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
     return false;
});

如果我使用上述网址进入网站，我可以根据需要查看第二个标签。

当我最终提交表单并且缺少必填字段时，页面会重新加载并输出错误。但是最后查看的选项卡未打开，而是没有打开任何选项卡，因为URL“丢失”了它的哈希标记。

如何在页面重新加载/刷新时显示上次访问/选中的标签？

我尝试在第一个脚本代码的第10行和第12行之间使用此代码将标签的ID添加到URL中：

location.hash = this.pathname.substring(3) + this.hash;

这样可以通过单击选项卡将ID作为哈希标记添加到URL。但是在提交表单时，URL“丢失”hast-tag并刷新页面。在页面加载时，URL将更改为www.xyz.com/contact.html#one。无论我尝试输入什么内容，例如www.xyz.com/contact.html#two或www.xyz.com/contact.html#three，网址始终会更改回www.xyz.com/contact.html#one

任何提示都表示赞赏！提前谢谢！

Answer 1

所以现在我实现了一个cookie函数：

    <script type="text/javascript" charset="utf-8">
        $(function () {
            var tabContainers = $('div.tabs > div');
            tabContainers.hide().filter(':first').show();

            $('div.tabs ul.tabNavigation a').click(function () {
                tabContainers.hide();
                tabContainers.filter(this.hash).show();
                $('div.tabs ul.tabNavigation a').removeClass('selected');
                $(this).addClass('selected');
$.cookie("tab", (this.hash)); 
alert($.cookie("tab"));
//location.hash = this.pathname.substring(3) + this.hash;
                return false;
            }).filter(':first').click();
$(document).ready(function(){
     tabContainers.hide();
     tabContainers.filter(window.location.hash).show();
     $('div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
     return false;
});

        });
    </script>

当我点击一个标签时，会设置一个新的cookie，并且该值会显示在警报中。

如何在网页加载时阅读Cookie并将Cookie的值添加到网址？

带有MODx Revo Formit的jQuery选项卡 - 在验证错误时，在URL中保留哈希

1 个答案: