href doesn't change browser address bar

Question

Why does my browser address bar not change on href. I have a link called "about" on my homepage. About opens in a div. When I click about it opens in the div but the url address bar remains same ie "www.example.com/homepage" when I want it to change to "wwww.example.com/homepage/about". I have tried

 windows.location.href="/about"

but it takes me to a new page rather than opening in the div. Is there a way of achieving what I am looking for — ie to change the address bar once the link open in the div.

Answer 1

You have to change your function to change the history state. You can add something like this to change the address in the address bar:

history.pushState(null, null, '/about');

https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history for more info.

Answer 2

I dont think this is possible. The browser will always show the address of the page loaded, and that cannot be changed without loading a new page.

You could achieve something similar using hashes if it is really important. it should be possible to change the url using something like this:

window.location.hash="about";

That should change the browser URL to www.xxxx.com/homepage#about without reloading the page.

and then if the user copies the URL or bookmarks the page then they will load that URL, which in turn would allow your javascript to detect the hash and load the appropriate content in the div.

Answer 3

You may be looking for window.location.hash

REgards