jquery - 单击多个选项卡(URL 更改为哈希值)然后浏览器后退按钮一个站点返回？

Question

我有一个网站，上面有几个标签。如果我单击一个选项卡，URL 将以以下方式更改:

www.example.com/site1.html#tab-2
www.example.com/site1.html#tab-5

因此，如果我单击了两个选项卡(URL 更改了两次)，然后单击了浏览器历史记录后退按钮，那么在我最终到达该站点之前，浏览器首先会检查所有 URL 更改我看到的网站。

如何避免？如果我点击 browser-history-back-butten 我想跳转到最后一页，不管我之前点击了多少个标签(以及 URL 以这种方式更改了多少次)

亲切的问候

Answer 1

如果您的用例中没有特定的 HTML 或 javascript，则很难确定最佳方法。也就是说，在处理历史状态和哈希时，您的工具包中确实存在三个重要的工具。

阻止更改

您还可以通过在选项卡的处理程序代码中使用 event.preventDefault(); ( docs ) 来避免整个问题，如下所示:

$('.tab').on('click', function (e) {
   e.preventDefault();
   ...
});

当用户单击选项卡时，您会立即调用 preventDefault —— 这将阻止默认操作继续进行。在这种情况下，您正在阻止链接的默认行为(大概)更改文档的 URL。 ... 表示用于处理选项卡单击操作的现有代码。

总而言之(同样没有看到您的用例)，这可能是“最佳”方法；至少，它更容易。

检测变化

您可以使用 window 对象的 onhashchange 事件(docs，注意有限的浏览器支持)来检测散列的变化。

window 对象的 onpopstate 事件可以类似的方式使用 ( docs )，但这是一个微妙的不同，可能更合适，具体取决于您如何实现“选项卡”，以及您是否需要监控对历史状态的其他更改。

$(window).on('hashchange', function (e) {
   console.log('hash change', e);  
});

$(window).on('popstate', function (e) {
    console.log('popstate', e);
});

在此处查看两者的实际情况:http://jsfiddle.net/m7qV9/1/ (一定要打开你的控制台)

使用这两种方法中的任何一种，您都可以根据需要使用 history 对象 ( docs ) 来管理替换或添加到历史记录。

一种方法:替换

这是一个使用 history.replaceState 的小示例。这种方法允许您将事件选项卡的标识符保留在 URL 中，以便用户可以通过他们的历史返回到他们所在的位置，但您不会因每个更改的选项卡而弄乱他们的历史记录。例如，http://www.mySite.com/#tab2 会在页面加载时打开标签 #2，但如果用户切换到标签 1，转到另一个页面，然后返回, 选项卡 #1 将处于事件状态。

请记住，这是概念模型。我不知道您现有的 HTML 和 javascript 是什么样的，所以我只是在演示一种方法，而不是为您的具体实现创建直接的解决方案。

$('.tab').on('click', function (e) {
   e.preventDefault();
   var whichtab = $(this).attr('href');
   $(this).parent().find('.active').removeClass('active');
   updateTab(whichtab, $(this).parent());
   return false;
});
$(document).ready(function() {
    if (document.location.hash.length > 0)
        updateTab(document.location.hash);
});
var updateTab = function (tab, parent) {
    if (!parent)
        parent = document;
    if (parent.find('.tab[href='+tab+']').length < 1)
        return;
    parent.find('.tab[href='+tab+']').addClass('active');
    parent.find('.tabContent-'+tab.replace('#', '')).addClass('active');
    window.history.replaceState({}, '', tab);
    return true;    
};

在这里试试:http://jsfiddle.net/5Qegc/

如果不能更好地了解您使用的是什么 javascript 和 HTML，就很难做到准确。希望这会有所帮助。

文档

MDN 上的
• event.preventDefault - https://developer.mozilla.org/en-US/docs/Web/API/event.preventDefault
MDN 上的
• window.onhashchange - https://developer.mozilla.org/en-US/docs/Web/API/window.onhashchange
MDN 上的
• window.onpopstate - https://developer.mozilla.org/en-US/docs/Web/API/window.onpopstate
• 在 MDN 上操纵浏览器历史记录 - https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history