Question: I want to load content using Ajax and keeping just the header from being reloaded, similar to this [site](http://jackietrananh.com).

So far I have this but don't know what else to add to get the same effect. I noticed that on that website that the URL also changes as well as the content apart from the header, which is exactly what I want. After looking through the source code I can't find anything that he's using apart from noticing the .php extension in the URL.

```
$('nav li a').click(function(){
  // var pageurl = $(this).attr(href);
  var pageurl = $(this).attr('href');

  $('#wrap').load(pageurl);
});

```

What am I doing wrong?

Update
------

Sorry, I did miss out the quotes on the `href` although it still doesn't work for me.

Answer: 
```
$('nav li a').click(function(e){
  var pageurl = $(this).attr('href');

  $('#wrap').load(pageurl);

  e.preventDefault();
});

```

You need to add quotes around the attr and also stop the link from changing page by adding preventDefault().

**Edit:**

I just noticed your selector is:

```
$('nav li a')

```

Are you sure it's not meant to be `#nav` or `.nav` (for ID or class)?
To achieve the change in the address bar, you need to use the history object of window.

Check <https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history>

From that page:

```
var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

```