Question

我的网站上有几个标签。如果我单击选项卡，则URL会以下列方式更改：

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

所以，如果我点击了两个标签（URL更改两次），然后点击浏览器历史记录后退按钮，那么浏览器会首先浏览所有的网址更改，然后才能最终访问网站。我看到的网站。

如何避免？如果我点击浏览器历史记录返回但我想跳转到最后一页，无论我之前点击了多少个标签（以及URL改变了多少次）

亲切的问候

Answer 1

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

防止更改

您还可以在标签的处理程序代码中使用event.preventDefault();（docs）来避免整个问题，如下所示：

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

当用户点击该标签时，您会立即拨打preventDefault - 这将停止默认操作的继续。在这种情况下，您将阻止链接的默认行为（可能是）更改文档的URL。 ...表示您处理标签点击操作的现有代码。

全部告诉（并且再次没有看到您的用例），这可能是“最好的”方法;至少，它更容易。

检测更改

您可以使用onhashchange对象的window事件（docs，注意有限的浏览器支持）来检测哈希值的更改。

onpopstate对象的window事件可以以类似的方式使用（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 - https://developer.mozilla.org/en-US/docs/Web/API/event.preventDefault
window.onhashchange - https://developer.mozilla.org/en-US/docs/Web/API/window.onhashchange
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

Answer 2

可能是您可以在锚标记的href属性中使用'javascript：void（0）'。

像这样

</`<a href = 'javascript:void(0)'>Tab-2</a>`

点击几个标签（用哈希值更改网址）然后浏览器返回按钮一个网站返回？

2 个答案: