Navigate Through AJAX Loaded Content Using URL

Navigate Through AJAX Loaded Content Using URL

I know this has been asked before but i cant seem to get it to work properly despite countless tutorials. I want to be able to use URL's to navigate through AJAX loaded content on the main page. I don't want to use "#", instead the actual page name and use the back and forward browser buttons. Here is the AJAX i use to load my pages. 

  2. $(document).ready(function() {

  4. //set your initial pages when website loads
  5. $("#content-container").load("content/corporate.php"); // set initial home page
  6.     $("#sidebar-container #sidebar-content-container").load("content/sidebar-content/activity.php"); // set initial sidebar page


  9. // content container load content based on nav tab clicked
  10. $("#nav-tabs-list li").click(function() {
  11. var page = $("a", this).attr("href"); // get the url of the tab clicked
  12. $("#content-container").load("content/" + page); // load content inside #content-container
  13. return false;
  14. });


  17. // sidebar container load content
  18. $("#sidebar-container #sidebar-tabs-container a").click(function() {
  19. var page = $(this).attr("href"); //get the url of the tab clicked
  20. $("#sidebar-container #sidebar-content-container").load("content/sidebar-content/" + page); //load content
  21. return false;
  22. });

  24. });