文章/答案/技术大牛

发布

社区首页 >问答首页 >Jquery选项卡:打破创建-选择-重新加载循环

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

Stack Overflow用户

提问于 2012-08-01 03:10:11

回答 1查看 180关注 0票数 0

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

我注意到这迫使浏览器处于create-tab、select-tab、reload、create-tabs、select-tab...的无休止循环中。诸若此类。有没有办法突破这一困境？

我意识到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>

javascript

jquery

tabs

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-08-01 03:32:18

你不能(或不应该)将每次用户更改选项卡时重新加载页面的选项卡与只显示/隐藏某些内容的选项卡混合在一起。我建议坚持使用两种方法中的一种。如果你想改变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来查找指向具有不同选项卡信息的相同页面的链接。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/11747260

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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