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

Question

如何根据URL中的哈希标记（元素ID）激活选项卡？

我知道多年来已经多次询问过这个问题，但答案与jQuery 1.10 +不再相关。

感谢。

Answer 1

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

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

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

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

由于沙箱网站都使用安全框架，我不得不使用带有虚拟URL的下拉列表来“模拟”不同的散列标签的工作方式，但使用上面的代码它将起到相同的作用。

CodePen：https://codepen.io/anon/pen/YvyxvL

您可以使用该页面上的下拉菜单模拟具有不同哈希标记的网址的行为，将不同的标签设置为有效。