Question

This post讨论了jQuery选项卡仍然具有后退按钮的问题。客户需要的是相当简单的 - 当他们按下时，他们想要回到他们刚看到的东西。但jQuery选项卡会加载第一个选项卡，而不是用户离开页面时选择的选项卡。

我已经阅读了accompanying link，并且说“这是有计划的，只要他找到时间，克劳斯就会在工作。”

有没有人用jQuery UI标签解决了后退按钮问题？

Answer 1

在切换标签时，您是否厌倦了更新浏览器位置？ http://www.zachstronaut.com/posts/2009/06/08/jquery-ui-tabs-fix.html

Answer 2

使用解决方案发布的历史问题缓动，后退按钮问题的一个脏修复是定期检查 location.hash 以查看它是否已更改，如果有，则触发点击相应链接的事件。

例如，使用zachstronaut.com更新的jQuery Tabs Demo，您可以将其添加到 $（document）.ready 回调中，它会有效地启用后退按钮切换标签，延迟不超过500毫秒：

j_last_known_hash = location.hash;
window.setInterval(function() {
    if(j_last_known_hash != location.hash) {
        $('#tabs ul li a[href="'+ location.hash +'"]').click();
        j_last_known_hash = location.hash;
    }
}, 500);

Answer 3

如果您的选项卡容器上有一个tabContainer类，要在用户单击选项卡时更新该URL，您可以这样做：

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

然后，如果您有一些getIndexForHash方法可以返回所选哈希值的正确选项卡号，则可以使用选项卡select方法而不是触发click;

    var j_last_known_hash = location.hash;
    window.setInterval(function() {
        var newHash = location.hash;
        if(j_last_known_hash != newHash) {
            var index = getIndexForHash(newHash);
            $('.tabContainer').tabs("select",index);
            j_last_known_hash = newHash;
        }
    }, 100);

Answer 4

window.onhashchange = function () {
  const $index = $('a[href="' + location.hash + '"]').parent().index();
  $('.tabContainer').tabs('option', 'active', $index);
}

jquery选项卡后退按钮

4 个答案: