Loading page contents without refreshing page

Question

Good afternoon/evening, everyone. Gentlemen, I have the following layout: (ex.png)

As you can see, I’m creating an administrative area for my system, where the top bar and the side ( both in black) are fixed, and the entire white part of the page will be content. What I want is, that by clicking on any option (or almost all) that changed only the content (white part) without me having to create another page with the same top and side bars.

Thanks for your help.

Answer 1

You can use ajax, or even Angularjs for this task.

HTML:

<ul id="menu">
  <li data-target="home.html">Home</li>
  <li data-target="cadastro.html">Cadastro</li>
  <li data-target="listar.html">Listar</li>
</ul>
<div id="conteudo"></div>

JS:

$('#menu li').click(function(){
$('#conteudo').load( this.data("target") );
})

See in operation: Fiddle

take a look: http://api.jquery.com/load/