Jquery 选项卡：打破创建-选择-重新加载循环

Question

我有一个使用 Jquery 选项卡的页面。选项卡不仅决定了我想在选项卡内容区域中显示的内容，还决定了在选项卡 div 之外显示的内容。

我想要的行为是，当用户选择一个选项卡时，使用 url 中的新参数重新加载整个页面。 （我目前通过将字符串附加到 location.href 来执行此操作，从而强制页面重新加载。

select: function(event, ui) {
    // ... determine new_url
    location.href = new_url;
}

当页面重新加载时，我希望正确的选项卡处于活动状态/选择状态，我尝试通过检测选项卡的参数来做到这一点。

create: function(event, ui) {
   // ... figure out which tab should be selected
   $('.tabs').tabs('select', tab_index);
}

我注意到这会迫使浏览器处于创建选项卡、选择选项卡、重新加载、创建选项卡、选择选项卡...等无休止的循环中。有没有办法摆脱这种情况？

我意识到 JQuery 选项卡不适用于此类工作，但我们将不胜感激！这是我第一次尝试 JQuery 选项卡。

一些额外说明： - 我正在使用 Rails 进行一些逻辑 - 我试图将“ui-state-active”类添加到应该选择的选项卡，这似乎被覆盖了。首先将第一个选项卡（索引0）设置为活动状态，然后在选项卡创建功能中，选择我要选择的选项卡。

<li class="tab<%= " ui-state-active" if THIS_TAB_SHOULD_BE_SELECTED %>">
  <a href="#tab-<%= type.downcase %>">tab 1</a>
</li>

Answer 1

您不能（或不应该）将每次用户更改选项卡时重新加载页面的选项卡与仅显示/隐藏某些内容的选项卡混合使用。我建议坚持使用这两种方法中的一种。如果您希望更改整个页面，请显示/隐藏两个选项卡和其他内容，或者 ajax 新内容并用新内容替换旧内容。或者，您可以执行以下操作：
HTML：

<div class="tabs">
  <span class="tab-head active">Tab 1</span>
  <div class="tab-content active">Lorem ipsum...</div>
  <span class="tab-head">Tab 2</span>
  <div class="tab-content">Lorem ipsum...</div>
  <span class="tab-head">Tab 2</span>
  <div class="tab-content">Lorem ipsum...</div>
</div>

CSS：

.tabs {overflow: auto;}
.tab-head {display: inline-block; float:left;}
.tab-content {display:none;}
.tab-content-active {display:block;}

JS：

$(".tabs .tab-head").click(function(){
    $(".tab-content,.tab-head",$(this).parent()).removeClass("active");
    $(this).addClass("active");
    $(this).next(".tab-content").addClass("active");
});

这大致是我几个月前为另一个网站所做的。

编辑：我目前正在研究一种方法，通过在 URL 的 fragment_id 部分中传递该数据来为每个单独的 tabber 分配初始 tab 位置，如下所示：page.com/path/page.php?foo=bar&baz=quux#tabs=0:1,2:6;，其中@ 987654325@是重要的部分。我会有一个 onload 处理程序解析它以显示正确的选项卡从开始和一些 JS 查找指向具有不同选项卡信息的同一页面的链接。