点击链接后如何隐藏url中的id？

Question

如果您单击该链接，您将在 url 中看到该 div 的 id。这怎么可能隐藏呢？

#one {

  margin-top: 100%;

  width: 50px;

  height: 50px;

  background-color: red;

}

<a href="#one">Link</a>

<div id="one"></div>

Answer 1

添加事件侦听器hashchange，然后设置 URLwindow.history.pushStatewindow.addEventListener("hashchange", () => window.history.pushState({}, "", '/'), {});#one {  margin-top: 100%;  width: 50px;  height: 50px;  background-color: red;}<a href="#one">Link</a><div id="one"></div>

Answer 2

您可以使用以下命令监听窗口哈希的变化window.addEventListener("hashchange", () => {}, false);然后更新网址window.history.pushState();所以你会做function hashHandler() {    const loc = window.location.hash.split('#')[1];    window.history.pushState({}, 'Page Title', '/' + loc);}window.addEventListener('hashchange', hashHandler, false);请注意，它仅适用于 Chrome / FF / IE 10+。