I am loading the pages in a div. Without reloading the page the content is loading into the page by using the below method.

Script
$(document).ready(function(){
$('a.menu_links').click(function(e) {
e.preventDefault(); // This line prevents the anchor from redirecting.
$("#content").load($(this).attr('href'));
});
});

Menu
<li><a class="menu_links" href="newproject.html">New Project</a></li>
<li><a class="menu_links" href="accord.html">Accordion</a></li>
<li><a class="menu_links" href="project_summary.html">Summary Table</a></li>
<li><a class="menu_links" href="detail_report.html">Detail Report</a></li>
<li><a class="menu_links" href="upload_data.html">Upload Data</a></li>

Target Div
<div id="content"></div>

It works fine. The problem now is when I refresh the page or use the browser back button Its not working as expected. I understand that the URL didn't get change according the content loads.

My Question is how to use the ID for the link and use it for the navigation. Pl. let me know how to solve this issue.