Carregando pagina dentro da div
Primeiro vamos montar a pagina html principal, com a seguinte estrutura:
<html>
<head>
<title>JQuery: Carregando pagina html</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="js/jquery/jquery-ui-1.12.1/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script src="funcao.js"></script>
</head>
<body>
<div id="central"></div>
</body>
</html>
É muito importante colocar a referencia a biblioteca JQuery e ao link da pagina js com o script.
Agora vamos a pagina js, aqui chamada de funcao.js, nela esta o script responsável por fazer o carregamento da pagina2.html na div da pagina principal.
funcao.js
$(document).ready(function(){
/**
*
*/
$("#item1").on("click", function(){
$("#central").load("pagina2.html #formulario");
});
});
Como funciona o script, ele chama a pagina2 quando o item1 do menu é clicado. E após faz o carregamento da div id="formulario" da pagina2.html e coloca dentro da div id="central" na pagina1.html
A pagina2 tem a mesma estrutura da primeira, mas só será visualizado a div formulario.
E por hoje é só, até a próxima!
Nenhum comentário:
Postar um comentário