Change url without reloading

Have you ever noticed how websites update the URL in your browser without fully refreshing the page?

Using History API:

This is particularly useful when creating smooth, dynamic user experiences in web applications.

Let’s consider a scenario where you have a simple HTML page with navigation links that, when clicked, change the URL without reloading the entire page.

We’ll create an example where clicking different links will change the URL accordingly.

In this example, we have a basic HTML structure containing a heading, navigation links, and a content section. The contains links to different pages (Page 1, Page 2, Page 3), each calling the function when clicked.

The function takes the page name as an argument, constructs a new URL based on that name, and uses to modify the URL without reloading the page.

Additionally, it calls the function to load content dynamically (this part could involve AJAX requests to fetch actual content).

For demonstration purposes, the function simply displays the name

how to change page url in javascript

how to change background url in javascript