如何替换窗口的URL哈希为另一个响应？

Question

我试图使用replace方法更改带有哈希值的URL（document.location.hash），但它无法生效。

$(function(){
 var anchor = document.location.hash;
 //this returns me a string value like '#categories'

  $('span').click(function(){

     $(window).attr('url').replace(anchor,'#food');
     //try to change current url.hash '#categories'
     //with another string, I stucked here.
  });

});

我不想改变/刷新页面，只是想替换URL而不产生任何响应。

注意：我不想使用 href="#food" 方案来解决这个问题。

- Barlas Apaydin

---

你是想改变哈希值吗？location.hash = '#food'; - Fabrício Matté

@FabrícioMatté 很敏锐，当“程序员”没有注意到这样的错误时，这是很棒的。显然，调试控制台是只有“某些”程序员知道的秘密……或者SO是一个远程错误/调试日志设施？^^' - Spooky

rofl，+1 @Spooky 但是不是每个人都非常熟悉JS，所以我通常告诉他们使用Chrome的Dev Tools或[Firebug]（https://getfirebug.com/），但是我想OP只是展示了他尝试过的例子，所以我只指出了一些原因为什么它不起作用。`:P` - Fabrício Matté

@FabrícioMatté - "我只是指出了一些它不能工作的原因"... 我笑得很厉害。你真好 :') - Spooky

http://chat.stackoverflow.com/ - Barlas Apaydin

Answer 1

请使用location或window.location代替document.location，因为后者是非标准的。

window.location.hash = '#food';

这将用您设置的值替换URL的哈希。

参考资料

- Fabrício Matté

---

如果你希望在用户点击锚点标签时更改URL中的哈希值，为什么不使用<a href="#bar">Foo</a>呢？ - Spooky

即使他正在开发插件，也可能无法编辑页面源代码。+1，令人毛骨悚然。 - Fabrício Matté

@barlasapaydin 没问题，还有http://jsfiddle.net/ult_combo/5yKr6/1/（我稍微编辑了您的插件，不确定这是否是您要求的） - Fabrício Matté

这是一个更干净、注释更充分的版本：Fiddle。顺便说一句，这是我在被赞同的回答中收到的第一个踩，好可爱 :)（我不是在抱怨匿名踩我的人，但如果你觉得我可以改进我的回答，那就评论一下吧）。 - Fabrício Matté

有趣的是，document.location.hash 对我起作用，而 window.location.hash 却没有。 - Blake Frederick

Answer 2

你可能更喜欢这个问题的答案。使用history.replaceState()的区别在于你不会滚动到锚点，只是将其替换为导航栏中的链接。它被所有主流浏览器支持，来源。

history.replaceState(undefined, undefined, "#hash_value")

- arc

---

应该将此答案设置为已接受 - 使用此方法除哈希值的更改外不会进行任何更改。 这一点尤其重要，因为原问题包含此条件：“我不想更改/刷新页面，我只想替换URL而没有任何响应。” - Rudi Ørnhøj

实际上，这个解决方案非常好，特别是如果不需要添加新的历史记录条目。我还注意到，在URL的末尾需要加上#，这一行就可以工作。 - vpxfhu77

可能需要类似这样的东西： window.history.replaceState(undefined, '', ${window.location.href.split('#')[0]}#${new URLSearchParams(newParams).toString()}) - JMadelaine