jquery - 使用 URL 打开 JQuery 选项卡,并在选项卡单击时向 URL 添加哈希值

标签 jquery jquery-ui jquery-ui-tabs

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

最佳答案

我最终使用了 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;
    });

希望这对某人有帮助! 谢谢。

关于jquery - 使用 URL 打开 JQuery 选项卡,并在选项卡单击时向 URL 添加哈希值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11023689/

相关文章:

jQuery UI 选项卡没有 href 和/或内容,只有事件?

javascript - 拖动 <div> 并在放下时取消隐藏隐藏的 <div>

javascript - .each() 两个不同的类

javascript - 允许 Enter Key 和 Click Function 同时运行

javascript - 所有单选按钮均已选中?

javascript - 覆盖 _renderItem 和 _renderMenu

javascript - jQuery ui 选项卡加载/tabsload 事件不触发

JavaScript undefined variable

javascript - JQuery——如何实现类似 mac os dock 的显示/隐藏行为的动画?

jquery-ui - 如果不在初始选择的选项卡上,jQuery UI 选项卡中的 TinyMCE 的大小在 ui 选项卡中的大小不正确(jsFiddle 示例)