我有一个网站，上面有几个标签。如果我单击选项卡，则 URL 会以以下方式更改：
www.example.com/site1.html#tab-2
www.example.com/site1.html#tab-5
因此，如果我单击了两个选项卡（URL 更改了两次），然后单击了浏览器历史记录后退按钮，那么浏览器首先会经历所有 URL 更改，然后我才最终到达该站点。我看到的网站。
如何避免这种情况？如果我点击 browser-history-back-butten 我想跳到最后一页，不管我之前点击了多少个 Tab（以及 URL 以这种方式改变了多少次）
亲切的问候
【问题讨论】：
如果您的用例中没有特定的 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，就很难准确。希望这会有所帮助。
文档
event.preventDefault MDN - https://developer.mozilla.org/en-US/docs/Web/API/event.preventDefault
window.onhashchange MDN - https://developer.mozilla.org/en-US/docs/Web/API/window.onhashchange
window.onpopstate MDN - https://developer.mozilla.org/en-US/docs/Web/API/window.onpopstate
【讨论】：
也许您可以在锚标记的 href 属性中使用 'javascript:void(0)'。
喜欢这个
</`<a href = 'javascript:void(0)'>Tab-2</a>`
【讨论】：