单击链接后如何在url中隐藏id？

Question

If you would click on the link, you would see the id of the div in your url. How is it possible to hide that?

 #one { margin-top: 100%; width: 50px; height: 50px; background-color: red; }

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

Would be very thankful for help!

Answer 1

Add an event listener for hashchange , and then set the URL with window.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>

Working example here: https://hashchange-pushstate.lcherone.repl.co

Answer 2

You can listen to changes in the window's hash with

window.addEventListener("hashchange", () => {}, false);

Then update the url with

window.history.pushState();

So you would do

function hashHandler() {
    const loc = window.location.hash.split('#')[1];
    window.history.pushState({}, 'Page Title', '/' + loc);
}

window.addEventListener('hashchange', hashHandler, false);

Note that it only works in Chrome / FF / IE 10+. You can read more about it here