Browser address bar not showing full url

Question

I use this code to open the contents of my Menu Links inside my Main div so I do not need to refresh the whole page each time:

.delegate('a.difflink', 'click', function(){
         $('#content').empty();
         var page = $(this).attr('id');
         $('#content').load("page_scripts/loop_a.php?page="+ page);

Problem created is that by using the above code my browser's address bar always shows www.myXample.com

And as I understand (not sure if I am correct) the way I made it work is like there are no new urls to show (since I am just changing div content).

Is there a way to change my url to match my content (eg if I press Downloads I get www.myXample.com/downloads ) and still no need to refresh the whole page?

Answer 1

.delegate('a.difflink', 'click', function(){
         $('#content').empty();
         var page = $(this).attr('id');
         $('#content').load("page_scripts/loop_a.php?page="+ page);
         window.history.pushState('','','/page1');
   }); 

This will change the URL in the address bar to www.myexample.com/page1