点击链接后如何隐藏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.pushState

window.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+。