JQuery Load parte do HTML externo

Question

Jun 21, 2012, 10:55 AM

jquery html javascript jquery-load html5

JQuery Load parte do HTML externo

Basicamente eu tenho um index.html mostrado abaixo ..

<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>

Os 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>

E meu objetivo é basicamente carregar 1 das divs de cada vez no container principal, eu sei que a função load pode carregar a página inteira de uma só vez, mas isso NÃO é o que eu preciso fazer.

Tinha alguns olhar para questões semelhantes, mas não consigo resolver isso ..

Toda ajuda é apreciada obrigado pessoal!