深度链接 Jquery 选项卡答案

【问题标题】：Deep Linking Jquery Tabs深度链接 Jquery 选项卡
【发布时间】：2012-02-22 00:30:53
【问题描述】：

我正在寻找一个插件/示例/教程，它将向我展示如何深度链接 jquery 选项卡和嵌套选项卡。有谁知道我在哪里可以找到这样的例子？我想把它添加到一个网站，但我不知道从哪里开始。

【问题讨论】：

【解决方案1】：

Asual jquery 地址插件应该会为您解决这个问题，还有很多示例 http://www.asual.com/jquery/address/ 或 github https://github.com/asual/jquery-address

或者你可以试试 ben alman 的 jquery bbq 插件

希望有帮助！

【讨论】：

...实际上我现在更倾向于history.js，需要更多的思考/技巧，但比我之前的建议要好得多！

【解决方案2】：

所有使用“选择”方法的解决方案都不适用于更高版本的 jquery 选项卡。现在通过将选项 active 设置为选项卡的所需 int（偏移量为 0）来完成。而且这个功能比jQuery地址插件更轻量级（可惜功能较少）。

function initTabs() {
var tabIndex = {'yourTabID-1':0,'yourTabID-2':1,'yourTabID-3':2}
var re = /#\w+$/; // This will match the anchor tag in the URL i.e. http://here.com/page#anchor
var match = re.exec(document.location.toString());
match = location.hash;
if (match != null) var anchor = match.substr(1);
for (key in tabIndex) {
    if (anchor == key) {
        selectedTab = tabIndex[key];
        break;
    }
else selectedTab = 0;
}
$( "#tabs" ).tabs( "option", "active", selectedTab );
//following part only if You need copyable deeplinks

$( "#tabs" ).on( "tabsactivate", function( event, ui ) {

    var re = /#\w+$/;
    var url = document.location.toString();
var newHash = 'yourTabID-' + ui.newTab.context.id.substring(6);
window.location.hash = newHash;
} );
}

【讨论】：