如何在不跳转文档的情况下更新 window.location.hash？

有一种解决方法是在现代浏览器上使用历史 API 并回退旧浏览器：

if(history.pushState) {
    history.pushState(null, null, '#myhash');
}
else {
    location.hash = '#myhash';
}

归功于 Lea Verou

问题是您将 window.location.hash 设置为元素的 ID 属性。无论您是否“preventDefault()”，浏览器都会跳转到该元素的预期行为。

解决这个问题的一种方法是在哈希前面加上一个任意值，如下所示：

window.location.hash = 'panel-' + id.replace('#', '');

然后，您需要做的就是在页面加载时检查前缀哈希。作为额外的奖励，您甚至可以平滑滚动到它，因为您现在可以控制哈希值......

$(function(){
    var h = window.location.hash.replace('panel-', '');
    if (h) {
        $('#slider').scrollTo(h, 800);
    }
});

如果您需要它始终工作（而不仅仅是在初始页面加载时），您可以使用一个函数来监视哈希值的更改并即时跳转到正确的元素：

var foundHash;
setInterval(function() {
    var h = window.location.hash.replace('panel-', '');
    if (h && h !== foundHash) {
        $('#slider').scrollTo(h, 800);
        foundHash = h;
    }
}, 100);

便宜又讨厌的解决方案..使用丑陋的#！风格。

设置它：

window.location.hash = '#!' + id;

要阅读它：

id = window.location.hash.replace(/^#!/, '');

由于它与页面中的anchor或id不匹配，因此不会跳转。

为什么不获取当前滚动位置，将其放入变量中，然后分配哈希并将页面滚动回到原来的位置：

var yScroll=document.body.scrollTop;
window.location.hash = id;
document.body.scrollTop=yScroll;

这应该工作

我结合了适用于现代浏览器的 Attila Fulop (Lea Verou) 解决方案和适用于旧浏览器的 Gavin Brock 解决方案，如下所示：

if (history.pushState) {
    // IE10, Firefox, Chrome, etc.
    window.history.pushState(null, null, '#' + id);
} else {
    // IE9, IE8, etc
    window.location.hash = '#!' + id;
}

正如 Gavin Brock 所观察到的，要捕获 id，您必须按如下方式处理字符串（在这种情况下可以有或没有“！”）：

id = window.location.hash.replace(/^#!?/, '');

在此之前，我尝试过类似 user706270 提出的解决方案，但在 Internet Explorer 上效果不佳：由于它的 Javascript 引擎不是很快，您可以注意到滚动增加和减少，从而产生令人讨厌的视觉效果。

这个解决方案对我有用。

设置 location.hash 的问题是，如果在页面上找到该 id，该页面将跳转到该 id。

window.history.pushState 的问题在于它会为用户单击的每个选项卡在历史记录中添加一个条目。然后，当用户单击 back 按钮时，他们会转到上一个选项卡。 （这可能是也可能不是你想要的。这不是我想要的）。

对我来说，replaceState 是更好的选择，因为它只替换当前历史记录，因此当用户单击 back 按钮时，他们会转到上一页。

$('#tab-selector').tabs({
  activate: function(e, ui) {
    window.history.replaceState(null, null, ui.newPanel.selector);
  }
});

查看 MDN 上的 History API docs。

这个解决方案对我有用

// store the currently selected tab in the hash value
    if(history.pushState) {
        window.history.pushState(null, null, '#' + id);
    }
    else {
        window.location.hash = id;
    }

// on load of the page: switch to the currently selected tab
var hash = window.location.hash;
$('#myTab a[href="' + hash + '"]').tab('show');

我完整的js代码是

$('#myTab a').click(function(e) {
  e.preventDefault();
  $(this).tab('show');
});

// store the currently selected tab in the hash value
$("ul.nav-tabs > li > a").on("shown.bs.tab", function(e) {
  var id = $(e.target).attr("href").substr(1);
    if(history.pushState) {
        window.history.pushState(null, null, '#' + id);
    }
    else {
        window.location.hash = id;
    }
   // window.location.hash = '#!' + id;
});

// on load of the page: switch to the currently selected tab
var hash = window.location.hash;
// console.log(hash);
$('#myTab a[href="' + hash + '"]').tab('show');

我不确定您是否可以更改原始元素，但是如何从使用 id attr 切换到其他类似 data-id 的元素？然后只需为您的哈希值读取 data-id 的值，它就不会跳转。

在使用 laravel 框架时，我在使用 route->back() 函数时遇到了一些问题，因为它删除了我的哈希值。为了保留我的哈希值，我创建了一个简单的函数：

$(function() {   
    if (localStorage.getItem("hash")    ){
     location.hash = localStorage.getItem("hash");
    }
}); 

我将它设置在我的其他 JS 函数中，如下所示：

localStorage.setItem("hash", myvalue);

你可以用任何你喜欢的方式命名你的本地存储值；我的名为 hash。

因此，如果在 PAGE1 上设置了哈希值，然后导航到 PAGE2；当您单击 PAGE2 上的返回时，哈希将在 PAGE1 上重新创建。