Question

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

我想要的行为是，当用户选择一个标签时，在网址中使用新参数重新加载整个页面。（我目前通过将字符串添加到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分配初始标签位置，如下所示：page.com/path/page.php?foo=bar&baz=quux#tabs=0:1,2:6;，其中#tabs=0:1,2:6;是重要的部分。我有一个onload处理程序解析，用于显示开头的正确选项卡和一些JS，它们查找指向具有不同选项卡信息的同一页面的链接。

Jquery选项卡：打破create-select-reload循环

1 个答案: