打开带有URL的JQuery选项卡，并在选项卡单击时向URL添加哈希 [英] Opening JQuery tabs with URL, and adding a hash to URL on tab click

问题描述

我正在使用Web应用程序，并且正在使用JQuery UI Tabs插件来分隔数据.
如果我将鼠标悬停在每个选项卡上，则在屏幕的左下角，我可以看到该选项卡的URL(例如:testPage.com/#tab1或testPage.com/#tab2)

I'm working on a web application, and I am using the JQuery UI Tabs plugin to separate the data.
If I mouse over each one of the tabs, on the lower left of the screen I can see the URL of that tab (ex: testPage.com/#tab1 or testPage.com/#tab2)

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

Now, if I type in one of those addresses into the URL bar, I do not go to the tab related to the hash in the URL, but instead I go to the first tab in the application.

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

My question is: How would I go about anchoring a specific tab to a URL?
So if someone goes to testPage.com/#tab3, They will end up in tab 3 on the application.

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

I am doing this also because I want to use the JQuery BBQ plugin to modify the browser history, so I can have a user go to the last tab they were on when they hit the back button.

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

推荐答案

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

I ended up using the JQuery Address plugin from Asual. I did the following:

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

希望这对某人有帮助！ 谢谢.

Hopefully this helps someone! Thank you.

这篇关于打开带有URL的JQuery选项卡，并在选项卡单击时向URL添加哈希的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！