Dynamically change page content between divs?

Dynamically change page content between divs?

I am looking for a way to change a single pages content instead of
redirecting a user to a new page using jQuery or anything similar. I am
quite new to scripting, so help would be greatly appreciated.
I've gone ahead and created a quick mock up in jsFiddle that demonstrates
the basic layout of the site and the content that I'd like to change when
a user requests a 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 a user follows a
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 you can see, the middle area of the site is where the action should be
happening. the rest (nav bar and footer) should stay fixed.
For reference, I've pulled up this guide that utilizes jQuery, "Modernizr"
and HTML5's history API in order to preserve unique URL's for each change
of content; this is exactly what I want to do, but I cannot seem to wrap
my head around how to make it work for my current design. Any help is
greatly appreciated, even a light hint to help me on my way. I am very new
to web design/development and have a LOT to learn.
Thanks!!