带有MODX Revo Forge的jQuery选项卡 - 验证错误，在URL中保留哈希值

我试了好几个小时才让我的联系表格正常工作。表单本身有一些标签。对于我使用的标签的代码是从本网站http://jqueryfordesigners.com/jquery-tabs/带有MODX Revo Forge的jQuery选项卡 - 验证错误，在URL中保留哈希值

这是我使用的脚本代码：

<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制作的表单也可以使用！

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

我想查看验证错误 - >页面重新加载的上次访问选项卡。

通过这个编辑，我可以实现通过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进入网站，我可以根据需要查看第二个选项卡。

当我最终提交表单并且缺少必填字段时，页面将重新加载并显示错误。但是最后查看的标签没有打开，而是没有打开任何标签，因为URL“松动”它是散列标签。

我怎样才能实现上次访问/选定的选项卡显示在页面刷新/刷新？

我试图一个选项卡的ID与该代码添加到URL其间在所述第一脚本代码行10和12：

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

这具有ID被添加到该效果通过点击一个标签将URL作为散列标签。但是在提交表单时，URL会“丢失”hast-tag并刷新页面。在网页加载时，网址更改为www.xyz.com/contact.html#one。无论我尝试输入什么内容（如www.xyz.com/contact.html#two或www.xyz.com/contact.html#three），网址始终会更改回www.xyz.com/contact.html#one

感谢任何提示！提前致谢！

来源

2012-07-14 Marc

所以现在我已经实现了一个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的值添加到URL？

来源

2012-07-15 14:32:57 Marc

带有MODX Revo Forge的jQuery选项卡 - 验证错误，在URL中保留哈希值

回答

相关问题