JQuery UI选项卡:如何直接从另一个页面导航到选项卡?

JQuery UI选项卡由无序列表中的命名锚实现。 当您将鼠标hover在其中一个标签上时,您可以在浏览器底部显示的链接中看到此信息:

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

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

但是,如果我将上面的链接加入书签或从站点的其他位置链接到该链接,则该页面不会在特定选项卡上打开。

在选项卡初始化块中,我正在考虑添加一些代码来查找URL中的命名锚点,如果找到一个,则执行选项卡的索引查找并调用其上的选择。 这意味着它仍然可以与JS关闭。

但是有更简单/更好/更好的方式吗?

在这里找到这个例子:

 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); } 

从1.8版开始,jQuery UI支持此function。 见这里的例子:

  1. 第二个选项卡默认处于活动
  2. 第三个选项卡默认处于活动

在1.8之前的jQuery UI版本(不包括在内)中,这几乎就是你必须要做的事情。 标签扩展(AFAIK)不知道根据初始化的锚点(当页面加载时)进行切换,因此您必须手动执行该操作(当然,在就绪事件中)。

正如另一个答案所示,jQuery UI 1.8中新版本的选项卡支持开箱即用的书签 。

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