Question

我发现有点奇怪的是，jQuery UI选项卡没有内置的便捷方法来使标签可书签（更改URL哈希）。以下代码片段对我有用

$("#tabs").tabs({
    "activate": function(event, ui) {
        window.location.hash = ui.newTab.context.hash;
    }
});

问题是，当哈希附加到URL时，页面会跳转到页面上的相应锚点。我怎样才能防止这种情况发生？我想要的只是更改显示当前所选标签的URL地址，但不会垂直移动页面。

更新：为了清楚起见，我不会坚持上面的代码。我只对能够使用所选标签的ID更改URL地址栏感兴趣，以便用户可以为标签添加书签或链接。

Answer 1

用HTML5历史记录（操作URL地址栏和浏览器历史记录堆栈而不刷新页面）替换window.location.hash（刷新页面）对我来说很有用。以下代码对我有用

$("#tabs").tabs({
    "activate": function(event, ui) {
        var url = window.location;
        window.history.pushState({
            "html": "",
            "pageTitle": title,
        }, "", url.href.replace(url.hash, "") + ui.newTab.context.hash);
    }
});

Answer 2

您可以将当前的垂直滚动距离存储到页面顶部并在之后重新应用，如下所示：

$("#tabs").tabs({
    "activate": function(event, ui) {'use strict';
        var scrollTop;   

        scrollTop = $(document).scrollTop();
        window.location.hash = ui.newTab.context.hash;
        $(document).scrollTop(scrollTop);
    }
});

使jQuery UI选项卡可收藏

2 个答案: