Question: I'm working on a CMS back-end with Codeigniter. Maybe it's not clear to state my question with word. So I use some simple html code to express my question:
There is a html page called `A.html`. The code in `A.html` is following:

```
<html>
   <head>
      /*something*/
   </head> 
    <!-- menu area -->
    <div class="menu">
       <ul class="nav">
         <li class="nav-header">menu item1</li>
         <li class="nav-header">menu item2</li>
         <li class="nav-header">menu item3</li>
       </ul>
    </div>

    <!-- content area -->
    <div id="content">
    </div>
</html>

```

I know we can use jQuery's load to change the `#content`'s content when I click the `nav-header`.But my question is that how can I make content change just in the content area(`#content`) while the rest of page content stay same when I click the link in the content area(`#content`). I have tried the `iframe`,but it make the page more complex and I don't like it. Thanks.

**UPDATE:**
Another example:Such as, I click the "News List" menu item and then the `#content` change to show news list.Now I click the "Add news" link in the `#content`, How can I make the `#content` area show add news form while the rest of the page stay same.

Answer: 
If you want all links to load content into `#content`, you can use this:

```
$(document).on('click', 'a', function(){
   $('#content').load(this.href);
});

```

But this won't work for external links.

If all your pages have the structure you described for A.html, you can add another div around `#content` (say, `#contentWrapper`), then use `.load` [like this](http://api.jquery.com/load/#loading-page-fragments):

```
$(document).on('click', 'a', function(){
   $('#contentWrapper').load(this.href + ' #content');
});

```

If you can't change the HTML, you can use `.get` instead, and replace the contents manually:

```
$(document).on('click', 'a', function(){
   $('#content').get(this.href, function(data){
       var content = $(data).find('#content').html();
       $('#content').html(content);
   });
});

```
You would do something like this with jQuery to load the page content with ajax when the user clicks on a navigation link. (You would need to add links into your menu first)

```
$('.nav-header>a').click(function(){

   $('#content').load($(this).attr('href'));

});

```