jquery - Dynamically change page content between divs? -

i looking way change single pages content instead of redirecting user new page using jquery or similar. quite new scripting, appreciated.

i've gone ahead , created quick mock in jsfiddle demonstrates basic layout of site , content i'd change when user requests different page:

http://jsfiddle.net/syrne/8pmnr/

code:

html:

<div class="container">     <div class="navbar">         <div id="navwrap" class="container">             <div class="nav-collapse collapse">                 <ul class="nav navbar-nav">                     <li><a href="#">home</a>                      </li>                     <li><a href="#">link 1</a>                      </li>                     <li><a href="#">link 2</a>                      </li>                     <li class="dropdown">   <a href="#" class="dropdown-toggle" data-toggle="dropdown">drop <b class="caret"></b></a>                          <ul class="dropdown-menu">                             <li>                                 <!-- dow -->                                 <li class="dropdown-submenu">   <a tabindex="-1" href="#">menu</a>                                      <ul class="dropdown-menu">                                         <li><a tabindex="-1" href="#">option 1</a>                                          </li>                                         <li><a tabindex="-1" href="#">option 2</a>                                          </li>                                         <li><a tabindex="-1" href="#">option 3</a>                                          </li>                                     </ul>                                 </li>                             </li>                         </ul>                     </li>                 </ul>             </div>         </div>     </div>     <hr></hr>     <div id="main_page">         <p><b>main content</b></p>         <p>this content should change dynamically when user follows page link.</p>         <hr></hr>     </div>     <div class="footer">         <p>&copy; 2013</p>     </div> </div> 

css:

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');  .dropdown-submenu {     position:relative; } .dropdown-submenu>.dropdown-menu {     top:0;     left:100%;     margin-top:-6px;     margin-left:-1px;     -webkit-border-radius:0 6px 6px 6px;     -moz-border-radius:0 6px 6px 6px;     border-radius:0 6px 6px 6px; } .dropdown-submenu:hover>.dropdown-menu {     display:block; } .dropdown-submenu>a:after {     display:block;     content:" ";     float:right;     width:0;     height:0;     border-color:transparent;     border-style:solid;     border-width:5px 0 5px 5px;     border-left-color:#cccccc;     margin-top:5px;     margin-right:-10px; } .dropdown-submenu:hover>a:after {     border-left-color:#ffffff; } .dropdown-submenu.pull-left {     float:none; } .dropdown-submenu.pull-left>.dropdown-menu {     left:-100%;     margin-left:10px;     -webkit-border-radius:6px 0 6px 6px;     -moz-border-radius:6px 0 6px 6px;     border-radius:6px 0 6px 6px; } #main_page {     text-align: center; }  .footer {     text-align: center; }  .navbar .nav, .navbar .nav > li {   float:none;   display:inline-block;    vertical-align: top; }  #navwrap {     text-align: center; } } 

as can see, middle area of site action should happening. rest (nav bar , footer) should stay fixed.

for reference, i've pulled this guide utilizes jquery, "modernizr" , html5's history api in order preserve unique url's each change of content; want do, cannot seem wrap head around how make work current design. appreciated, light hint me on way. new web design/development , have lot learn.

all need ajax. basic procedure may be:

1. attach click event on navigation links.
2. when user clicks link, prevent default action , in href.
3. use ajax contents link.
4. update main content div new content.

eg:

$('nav li').on('click', 'a', function(e){ //step 1   e.preventdefault(); //prevent default action, step2   var url = $(this).attr('href'); //get url, step 2    $.ajax({ //step 3     url: url,     //your other options     success: function(response){ //on success       $('your main div').html(response); //update div, step 4     }   }); }); 

edit based on comment

there problem implementation. targeting $('#link1') doesn't exists. change links of navigations this:

<ul class="nav navbar-nav">    <li><a href="#">home</a></li>    <!-- script below data href attribute of anchor tag -->    <!-- href attribute should target file want load content -->    <li><a href="external.html">link 1</a></li>     <li><a href="external2.html">link 2</a>    ... </ul> 

then use following code.

$(document).ready(function(){     $("ul.nav li a").click(function(e){          e.preventdefault();         var url = $(this).attr('href'); //get link want load data         $.ajax({           type: 'get',          url: url,          success: function(data) {              $("#main_page").html(data);          }         });       });   }); 

or, if want current implementation work provide id anchor tag this

<a href="#" id="link1"> 

also sure wrap script inside $(document).ready(function(){})