Change html content and url without page reloading like Facebook navigation menu

Question

I have a website with 2 html pages (contact.html and index.html). and I have a menu-sidebar and a content div in my web site.

I want 2 things :

1.switch between 2 html pages from menu but without reloading the whole page.I want load those html pages in my content div with JavaScript or jQuery AND also change the URL.

2.I want those html pages be accessible with separate URLs.

What is the best structure for this website ? I was thinking an html file like structure.html that contains a sidebar and a content div and if user wants to load mydomain.com, load the structure.html and load the index.html in the content div and if user wants to load mydomain.com/contact, load the structure.html and load the contact.html in the content div. but I don't now how.

Should I have 2 html file for each pages ? for example the contact page : one html file to access from mydomain.com/contact and the other one for loading in content div with ajax and for access from the menu.

Answer 1

You can change the page content without reloading by manipulating the DOM. There is an extensive API for this along with hundreds of libraries to accomplish that.

Changing the url without reload uses the history pushState API (See history.pushState and jQuery ).

Libraries

• jQuery - Easy DOM manipulations
• React - What facebook uses for manipulating the DOM.
• Ember - A great all in one framework for single page applications.