3

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

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

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

如何避免这种情况？如果我点击 browser-history-back-butten 我想跳到最后一页，无论我之前点击了多少个选项卡（以及 URL 以这种方式改变了多少次）

亲切的问候

4

2 回答 2

3

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

防止改变

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

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

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

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

检测变化

您可以使用对象的onhashchange事件window（文档，注意有限的浏览器支持）来检测散列的更改。

对象的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，就很难准确。希望这可以帮助。

文档

于 2013-07-08T16:26:09.407 回答
-2

可能您可以在锚标记的 href 属性中使用“javascript:void(0)”。

像这样

</`<a href = 'javascript:void(0)'>Tab-2</a>`
于 2013-07-12T10:35:26.800 回答