打开带有 URL 的 JQuery 选项卡，并在单击选项卡时向 URL 添加哈希答案

【问题标题】：Opening JQuery tabs with URL, and adding a hash to URL on tab click打开带有 URL 的 JQuery 选项卡，并在单击选项卡时向 URL 添加哈希
【发布时间】：2012-06-13 21:38:16
【问题描述】：

我正在开发一个 Web 应用程序，我正在使用 JQuery UI Tabs 插件来分离数据。
如果我将鼠标悬停在每个选项卡上，在屏幕的左下方我可以看到该选项卡的 URL（例如：testPage.com/#tab1 或 testPage.com/#tab2）

现在，如果我在 URL 栏中输入其中一个地址，我不会转到与 URL 中的哈希相关的选项卡，而是转到应用程序中的第一个选项卡。

我的问题是：如何将特定标签锚定到 URL？
因此，如果有人访问 testPage.com/#tab3，他们最终会出现在应用程序的标签 3 中。

我这样做也是因为我想使用 JQuery BBQ 插件来修改浏览器历史记录，这样我就可以让用户在点击后退按钮时转到他们所在的最后一个选项卡。

示例：
http://benalman.com/code/projects/jquery-bbq/examples/fragment-jquery-ui-tabs/

【问题讨论】：

document.location.hash=var; 如果您只是想在 URL 中添加一些内容...
我可以通过地址访问该选项卡吗？在我在链接中给出的示例中，我想基本上做当你点击一个标签时正在做的事情。
那为什么不直接复制那个例子..？
我一直在努力哈哈。这就是我现在正在做的事情。不过感谢您的帮助。

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

【解决方案1】：

我最终使用了 Asual 的 JQuery Address 插件。我做了以下事情：

    // For forward and back
    $.address.change(function(event){
        $("#main_tabs").tabs( "select" , window.location.hash );
    });

    // when the tab is selected update the url with the hash
    $("#main_tabs").bind("tabsselect", function(event, ui) { 
        window.location.hash = ui.tab.hash;
    });

希望这对某人有所帮助！谢谢。

【讨论】：

【解决方案2】：

您也可以通过以下方式尝试。我在锚元素中有name 属性。此名称将作为哈希 URL 添加。

Javascript：

$( "#tabs" ).tabs({
    select: function(event, ui) {                   
        window.location.hash = ui.tab.hash;                     
    }
});

HTML：

<div id="tabs" > 
    <ul>
        <li><a name="Test1" href="Home/Test1"> Tab 1  </a></li>
        <li><a name="Test2" href="Home/Test2"> Tab 2  </a></li>
        <li><a name="Test3" href="Home/Test3"> Tab 3  </a></li>            
    </ul>        
</div>

【讨论】：