时间戳

首页 > 解决方案 > jQuery UI 1.12 – 通过链接或 URL 激活选项卡

jquery-ui - jQuery UI 1.12 – 通过链接或 URL 激活选项卡

问题描述

如何根据 URL 中的井号标签（元素 ID）激活选项卡？

我知道这些年来这个问题已经被问过好几次了，但答案不再与 jQuery 1.10+ 相关。

谢谢。

标签： jquery-ui

解决方案

完成此操作有两个步骤 - 首先，将哈希标签（例如 #SomeValue）与您想要激活的选项卡的元素 ID 匹配；然后第二，将所述选项卡设置为活动状态。

var matchedTab = $('a[href="' + window.location.hash + '"]');
$('#tabs').tabs({active:$('#tabs a').index(matchedTab)});

第一行是从 tab 元素创建一个 jQ 对象，其href属性与 URL 中的哈希值匹配。由于 Tabs 插件的标记需要（文档<a>）您有一个带有属性的锚元素href，这将找到正确的选项卡（假设您有一个与 URL 中的哈希相对应的选项卡）。

然后第二行使用active初始化选项在初始化选项卡时设置所需的活动选项卡。尽管该active选项需要 Tabs 集合中该选项卡的从零开始的索引，因此我们使用.index()jQuery 函数来获取该索引并将其传递给active选项。

由于沙盒站点都使用安全框架，我不得不使用带有虚拟 URL 的下拉菜单来“模拟”不同哈希标签的不同工作方式，但使用上面的代码它的功能相同。

CodePen 在这里：https ://codepen.io/anon/pen/YvyxvL

您可以使用该页面上的下拉菜单来模拟具有不同哈希标记的 URL 的行为，将不同的选项卡设置为活动状态。

推荐阅读