Here is an example of exactly what has to happen (each time you click "Lorem" or "Ipsum" or "Hello" the content for those html pages are loaded into the same spot above (i.e. the #content div on the index.html file): http://ckprototype.com/public/ocad_w...ple/index.html

The task is to make the content within the #content div on the index.html file change each time you click on a link (i.e. the titles below the #content div that are for 1.html, 2.html, 3.html, 4.html). I have to use AJAX/jQuery to do this so each time I click on a title (in the "text" div) it's content automatically loads in the #content div space in the index.html file. I'll post the code I have below so far, but any help figuring this out would be greatly appreciated! Thanks!

HTML:
Code:
<!DOCTYPE html>
<html>
	<head>
    	<!-- Responsible for metadata and linkage to CSS -->
        <link rel="stylesheet" href="css/style.css">
        <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
        <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body>
    	<!-- Responsible for elements shown to user -->
        <div id="container">
        	<div id="header">
            	AJAX Exercise
            </div>
            <div id="content">
				<iframe src="https://player.vimeo.com/video/151864795?color=5cfaa1&title=0&byline=0&portrait=0&badge=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>            
            </div>
            <div id="text">            
            	<div class="block">
                	<h1><a href="1.html">Lorem</a></h1>
                    <p>Lorem ipsum dolor sit amet.</p>
                </div><!--
                --><div class="block">
                	<h1><a href="2.html">Ipsum</a></h1>
                    <p>Integer sit amet ante non orci.</p>
                </div><!--
                --><div class="block">
                    <h1><a href="3.html">Hello</a></h1>
                    <p>Nullam convallis, sem at tincidunt.</p>
                </div><!--
                --><div class="block">
                    <h1><a href="4.html">World</a></h1>
                    <p>Ut nec gravida velit.</p>
                </div>                        
            </div>
            <div id="footer">
            	Footer Text
            </div>
        </div>      
    </body>
</html>
jq/ajax:
Code:
$(document).ready(start);

function start(){

$("a").click(function(e){
	e.preventDefault();
	var destination = $(this).attr("href");
	$("#content").load(destination);

});

};
CSS:
Code:
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}




/* MY CODE! */

body
{
	font-family: Arial;
	background-color:#eeeeee;	
}

#container
{
	width:640px;
	border:2px solid #000;
	margin-top:30px;
	margin-bottom:30px;
	margin-left:auto;
	margin-right:auto;
}
	
#header
{
	background-color:#da0000;
	color:white;
	text-align:center;
	font-weight:bold;
	padding-top:20px;
	padding-bottom:20px;
	font-size:1.5em;
	text-transform: uppercase;
}

#footer
{
	background-color:#000000;
	color:white;
	font-size:0.9em;
	text-align:center;
	padding-top:10px;
	padding-bottom:10px;
}

iframe
{
	display:block;
}

.block
{
	width:280px;
	padding:19px;
	display:inline-block;
	border:1px solid #999;
}

.block h1
{
	font-size:1.2em;	
	margin-bottom:5px;
}

.block h1 a
{
	color:inherit;	
}

#left
{
	background-color:#da0000;
	color:white;
}

#right
{
	background-color:#eee;
	color:black;
}

@media screen and (max-width:640px) {

#header

{

background-color:green;

}

#container, #content iframe

{

width:320px;

}

}

@media screen and (min-width:1280px) {

#header

{

background-color:blue;

}

#container, #content iframe

{

width:1280px;

}

}