Jquery Load parte de HTML externo

Básicamente tengo un index.html que se muestra a continuación ...

<html>

<head>

<title>UI Test: Main Menu</title>

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="general.js"></script>

</head>

<body>  

<input type="button" value="Details" onclick="javascript:$('#mainContainer').load('loadpage.html #name1div *');"/><br>
<div id="mainContainer">        

</div>

Los loadpage.html cotaints

<div id="nav1div><h3>1 DIV </h3> </div>
<div id="nav2div><h3>2 DIV </h3> </div>
<div id="nav3div><h3>3 DIV </h3> </div>
<div id="nav4div><h3>4 DIV </h3> </div>

Y mi objetivo es cargar básicamente 1 de los divs a la vez en el contenedor principal, sé que la función de carga puede cargar la página completa a la vez, pero esto NO es lo que necesito hacer.

Eché un vistazo a algunas preguntas similares, pero parece que no puedo resolver esto ...

Toda la ayuda es apreciada gracias chicos!

Respuestas a la pregunta(3)

Su respuesta a la pregunta