使用URL打开JQuery选项卡，并在选项卡点击时向URL添加哈希。

Question

我正在开发一个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/

- npiani

---

如果你只是想将某些内容添加到URL中，可以使用以下代码：document.location.hash=var;。 - ayyp

我能通过地址访问那个选项卡吗？基本上，我想做的就是在我给出链接中点击选项卡时所做的操作。 - npiani

那为什么不直接复制那个例子呢？ - ayyp

我一直在尝试，哈哈。这是我现在正在努力的事情。不过还是谢谢你的帮助。 - npiani

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

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

- npiani

Answer 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>

- N Rocking