Change URL without Refreshing?

Question

Basically, on my website, I want to make it so when you switch between pages by clicking on HREF links, it doesn't reload the page but it changes the URL. My website is here: https://abyssalplains.us/ and a website I found as a good example is this one: http://anomaly.com/ when you switch between the tabs, it changes the URL without reloading the page. Can someone explain how to do this.

Answer 1

The example you have provided is using CSS transitions from an internal library using a list to show all the "tabs" and to get the layering effect they are using z-index.

The path is changing from an onClick event on each "tab", essentially showing you the next so called "page" but is just firing an animation event.

But really all the content is getting loaded all at once, rather than dynamically with lets say onClick events or a virtual DOM.

I hope this helps you resolve your problem.

Answer 2

First of all, you need to set up the router to handle the url.
You can use AngularJS for the shortcut or write your own javascript logic by manipulating the browser url history.
If you're write your own javascript then you will also need to handle the page loading too..
Usually you can delete some html body and replace it with the loaded page with jQuery

So the logic is:
1. Get the URL with javascript window.location.href
2. Load new html content of specific page with ajax and save it to a variable
3. Remove or replace current html content with new html content
4. Change the browser history

Answer 3

I think this plugin would work the same as u want. U just need to follow the simple steps which are already on the website: Website URL: http://barbajs.org/

Just visit here and for more information, you can see this URL also http://barbajs.org/examples.html

And the technology which around you are searching is called pjax.