JQuery UI 选项卡：如何从另一个页面直接导航到选项卡？答案

【问题标题】：JQuery UI tabs: How do I navigate directly to a tab from another page?JQuery UI 选项卡：如何从另一个页面直接导航到选项卡？
【发布时间】：2010-03-31 17:06:26
【问题描述】：

JQuery UI 选项卡由无序列表中的命名锚点实现。当您将鼠标悬停在其中一个选项卡上时，您可以在浏览器底部显示的链接中看到这一点：

http://mysite/product/3/#orders

例如，上面是“订单”标签。 JQuery 显然拦截了对该锚点的单击并打开选项卡。

但是，如果我将上面的链接添加为书签或从网站的其他地方链接到该链接，则该页面不会在特定选项卡上打开。

在选项卡初始化块中，我正在考虑放入一些代码来查找 URL 中的命名锚点，如果找到，则对选项卡进行索引查找并在其上调用 select。这意味着它仍然可以在 JS 关闭的情况下工作。

但是有没有更简单/更好/更好的方法？

【问题讨论】：

JS 选项卡控件在 JS 关闭的情况下无法使用，因为它都是 js
有趣 - 1.3.2。一段时间以来一直想升级，但我会遵循“没有损坏，不要修复它”的政策。听起来我现在有充分的理由升级（虽然我不期待重新测试）
@Hunter - 不，标签不起作用，但行为仍然是正确的。如果 JS 被关闭，链接会将您带到页面的正确部分。
jQuery 1.3.2 还是 jQueryUI 1.3.2？
看起来我正在使用稳定版本，所以我可能会坚持使用编码解决方案，不过谢谢

标签： javascript jquery jquery-ui jquery-ui-tabs

【解决方案1】：

找到这个例子here:

if(document.location.hash!='') {
    //get the index from URL hash
    tabSelect = document.location.hash.substr(1,document.location.hash.length);
    $("#my-tabs").tabs('select',tabSelect-1);
}

【讨论】：

完美，我已经将它封装在一个辅助函数中，并从选项卡控件的加载事件中调用它，谢谢
这不会做的一件事是保留选项卡之间的哈希信息。因此，如果我从同一页面中从 www.page.com#1 到 www.page.com#2，它不会更改选项卡。
@Zach - 你去年在哪里？
这是个奇怪的问题，什么意思？
我正在寻找与此答案相关的特定问题的解决方案。考虑到每个人仍然收到通知，我认为迟到的 cmets 和问题没有任何问题。

【解决方案2】：

从 1.8 版开始，jQuery UI 支持此功能。请参阅此处的示例：

【讨论】：

谢谢，暂时没有稳定版，我会升级的时候我会升级
BTW jQueryUI 1.8 是当前的稳定版本（参见 jQuery UI 1.7 怎么样？ 部分）。 blog.jqueryui.com/2010/03/jquery-ui-18
奇怪，他们还没有更新首页：最新（1.8：jQuery 1.4+）稳定（1.7.2：jQuery 1.3+）-我也在使用jquery 1.3，所以我会同时升级两者。
链接不再有效
不幸的是，当通过 AJAX 加载内容时它不起作用。

【解决方案3】：

在 1.8（不包括）之前的 jQuery UI 版本中，这几乎是您必须这样做的方式。选项卡扩展 (AFAIK) 不知道根据初始化它的锚点进行切换（页面加载时），因此您必须手动执行该操作（当然是在就绪事件中）。

正如another answer所指出的，jQuery UI 1.8中标签的新版本supports bookmarking out of the box。

【讨论】：

谢谢，只是想确保我没有遗漏任何明显的东西。必须是通用要求
FWIW 他们在 jQuery UI 网站上的演示似乎在锚点上正确初始化。
@R0MANARMY - 我建议您添加一个答案，说“这适用于最新版本”。那我可以给你加分

【解决方案4】：

我使用 Session 插件在自定义选项卡类中完成此操作

【讨论】：