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

Jquery tabs: breaking create-select-reload cycle

本文关键字：新加载 -重 加载 循环 选择 选项 创建 Jquery      更新时间：2024-05-25

我有一个使用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>

您不能（或不应该）将每次用户更改选项卡时重新加载页面的选项卡与只显示/隐藏某些内容的选项卡混合使用。我建议坚持这两种方法中的一种。如果您想更改whle页面，可以显示/隐藏两个选项卡和其他内容，或者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部分传递数据，将初始选项卡位置分配给每个选项卡，如下所示：page.com/path/page.php?foo=bar&baz=quux#tabs=0:1,2:6;，其中#tabs=0:1,2:6;是重要部分。我会有一个onload处理程序解析，它显示起始处的正确选项卡，以及一些JS，它查找指向具有不同选项卡信息的同一页面的链接。

相关文章：