Publicado em 5 de mar.

Carregar página em DIV com jQuery

Boa noite galera...

Alguém pode me passar uma explicação simples de como carregar páginas em DIVs de uma forma simple...

Ou até mesmo algum tópico do fórum, não achei nenhum que me clareou a idéia.

EXPLICAÇÂO:

Terei a index.html e nela uma DIV conteudo onde ao clicar nos links (HOME, SERVICOS, etc) as respectivas páginas serão carregadas nesta DIV.

Estou tentando fazer deste jeito, com JQuery porque faço do método tradicional e acho que já está ficando desatualizado.

Desde já agradeço

ZUCOLLI

Discussão (22)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Francispansa· 5 de mar.

>
Alguém pode me passar uma explicação simples de como carregar páginas em DIVs de uma forma simple...

ZUCOLLI, pra fazer isso você pode usar o load do jQuery, http://api.jquery.com/load/..

Abrass

Dii· 10 de mar.

É o seguinte, farei um esquema simples de como você deve fazer para carregar esses conteúdos sem precisar atualizar a página com PHP e AJAX.

index.php

<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.1.min.js'></script>
<script type='text/javascript'>
$(document).ready(function(){

// Executa o evento CLICK em todos os links do menu

$('#menu a').live('click',function(){
 // Faz o carregamento da página de acordo com o COD da página, que vai pegar os valores da página page.php.
 $('#conteudo').load($(this).attr('href'));
 return false;

});

});
</script>
</head>
<body>
<div id='menu'>
<ul>
<li><a href='page.php?cod=1'>Home</a></li>
<li><a href='page.php?cod=2'>Serviços</a></li>
</ul>
</div>

<div id='conteudo'>

</div>
</body>
</html>

Agora vou mostrar como pegar os valores utilizando PHP.

page.php

<?php
// Aqui ele pega o valor da varíavel do navegador.
$cod = $_GET['cod'];
// A condição switch faz com que o valor dos códigos do primeiro script represente uma página html que carregará na div conteudo.
switch($cod){
case '1'; // Aqui por exemplo, lá é page.php?cod=1, certo? Então ela vai carregar a página home.html na div conteúdo.

include('home.html');
break;

case '2'; // Aqui tambem, lá é page.php?cod=2, então ela carregará a página de noticias.html.

include('noticias.html');
}

?>

Bom, tentei exemplificar ao máximo possível para que você entenda, obrigado.

PS: Caso queira adicionar mais coisas, é só por um break; e mais cases. Até mais

ZUCOLLI· 10 de mar.

Dii acho que é isso...

Vou fazer e posto se deu certo.

Muito obrigado.

CARLOS

Dii· 11 de mar.

Ok, aqui funcionou.

Qualquer dúvida sobre como funcione, poste aqui que eu te ajudo. =D

ericolvr· 28 de mar.

Desculpe pela pergunta, sou péssimo com JS.

E se essas variaveis fossem passadas através de um <select>, qual seria o seletor do Jquery?

Dii· 29 de mar.

Olha, eu fiz um aqui, sem utilizar a programação em PHP, mas que você poderá abrir páginas PHP com ele.

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function(){

// Define as variaveis de acordo com a quantidade da página // opcional.

$('#inicio').click(function(){
// Define a página que vai ser aberta, quando usuario clickar.

var pagina = "inicio.php";
	$('#conteudo').load(pagina);

});

$('#registro').click(function(){

// Repetindo a variável pagina, que receberá a página registro.php, ele poderá ser modificado. Mesmo processo acima.

var pagina = "registro.php";
	$('#conteudo').load(pagina);
});

});
</script>
</head>
<body>
<form id='form'>
<select>
<option id='inicio'>Página Principal</option>
 <option id='registro'>Registro</option>
</select>
</form>

<div id='conteudo'>

</div>
</body>
</html>

 

Isso ai funciona de acordo com que o usuário escolher. Se você quiser adicionar mais coisas, é so adicionar um novo <option> com um novo ID e adicionar lá no código, basicamente é so repetir os processos. Deixei os comentários, se você não entender, diga-me.

William Bruno· 29 de mar.

@Dii, que tal assim:

<select name="paginas">
 <option value="inicio.php">Página Principal</option>
 <option value="registro.php">Registro</option>
</select>

e ai no jquery:

$("select[name='paginas']").change(function(){
 $('#conteudo').load( $( this ).val() );
});

e pronto. Se quiser mais, basta alterar o HTML, sem duplicar nada no jQuery.

Dii· 29 de mar.

Opa! Valeu pela dica, eu nem havia pensado nisso rs.

brunoagne3· 8 de mar.

aqui funciona a troca de conteúdo do div, mas com erro de charset (UTF-8 e ISO-8859-1...)

quando na pagina a ser carregada tem acentos, aparece um monte de ??????, as minhas 2 paginas estao em iso-8859-1.

como resolvo isso? li na internet q o jquery troca para UTF-8... não sei o q fazer.

abaixo meu código:

arquivo: menu.js

//codigo para alterar o conteudo da DIV = CORPO

$("#menu_esquerda a").click(function()

{

/decobre o ID do link foi clicado/

 var id = $(this).attr('id');

 

 /*cria o link do artigo que será chamado*/

 var link = 'artigos_css/artigo' + id + '.htm';

 

 /*troca o conteudo do div*/

 $("#corpo").load(link);

 

});

William Bruno· 8 de mar.

Leia e entenda:

http://wbruno.com.br/2011/04/19/problemas-acentuacao-ajax-como-resolver/

brunoagne3· 10 de mar.

>
Leia e entenda:

http://wbruno.com.br/2011/04/19/problemas-acentuacao-ajax-como-resolver/

muito obrigado, mas tem um porém....

com excelente seu tutorial consegui assim um determinado DIV na pag1.html, carrega o arquivo pag2.php via Jquery (usando LOAD).

porém eu gostaria de saber se tem como fazer isso sem problemas de acentos se os 2 arquivos forem .HTML

até pq pra usar o LOAD do jquery não precisa de PHP.

isso é possível??

desde já agradeço toda a atenção.

turfeaugusto· 30 de mai.

gostaria de saber como faz esse recurso usado nesse forum onde passa o mouse por cima do nomedo usuario e abre uma janela de informaçoes dentro de uma div.vou avisando sou novo aqui hein...

William Bruno· 30 de mai.

@turfeaugusto, crie um novo tópico para sua dúvida.

E apenas respondendo rapidamente, vc deve pesquisar por dropdown

turfeaugusto· 31 de mai.

o eu nao consegui fazer um novo topico procurei e nao achei ...mais obrigado por sua atençao vou pesquisar

William Bruno· 31 de mai.

Aqui amigo:

http://forum.imasters.com.br/index.php?app=forums&module=post&section=post&do=new_post&f=6

basta postar.

rdpacato· 7 de ago.

Pessoal, estou com o mesmo problema... só que estou em java... não consegui aplicar isso... não sei como carregar apenas o conteúdo e manter os dados das outras divs (checkbox) selecionados, para não dar refresh.

e também depois de pegar os valores do servlet retornar para essa div, sem carregar página, hoje ele está abrindo uma nova tela.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
	<head>
 <title> PGPM - Menu </title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <BASE href="home.html" target="principal">
 <link rel='stylesheet' type='text/css' href='css/buttonMenu.css'>
 <link rel='stylesheet' type='text/css' href='css/padrao_VisualPED.css'>
 <link rel="stylesheet" href="css/jquery-ui.css" />

 <link rel="stylesheet" type="text/css" href="css/styles.css" />
 <script src="js/jquery-latest.min.js"></script>
 <script src="js/script.js"></script>
 <script src="js/jquery-1.9.1.js"></script>
 <script src="js/jquery-ui.js"></script>

	</head>

<style>

html{overflow:auto;width:auto;}
body {background-color: #000; margin-top: 0px; margin-bottom: 0px;}

#container {margin-right: auto; margin-left: auto;}

#header {height: 100%; width:100%; background-color: #333}

#sidebar {position: relative; float: left;}

#mainContent {height: 100%; width: 100%; background-color: #999; float: right;}

#tituloPrincipal {position: relative; padding:5px; margin: 0; margin-center:100%; font-weight: bold; color:#444; text-align:center;}

#conteudoFiltro {width:auto; margin: 0 auto; margin-left:0}
#comboVeiculo {font-size:13px;}
#tituloAba {background:#0094ff; width:100px; height:25px;}
.titulo {font-weight: bold; color:#FFF; text-align:center; padding-top:4px;}
#box {border:2px solid; border-color:#0094ff; width:320px; font-size: 13px;}
#posicao {padding:2px; position: relative; margin:0; display: block;}
.posicao .esquerda {padding:2px; position:relative; float:left; margin:0; display: block;}
.posicao .direita {padding:2px; position:relative; float:right; margin:0; display: block;}
.posicao .clear {clear:both;margin:0;padding:0;}

.ui-datepicker {font-size: 12px;}
.ui-datepicker td span, .ui-datepicker td a {display: inline-block; font-weight: bold; text-align: center; width: 20px; height: 20px; line-height: 20px;}
.ui-datepicker-calendar .ui-state-default {color:#06F;}
.ui-datepicker-unselectable .ui-state-default {background: #f4f4f4; color: #b4b3b3;}
.arrow_box-ca:after, .arrow_box-ca:before {bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;}
.ui-datepicker-trigger {position: relative; top: 4px; padding: 2px; margin:0px;}
.ui-datepicker-calendar .ui-state-active {background: #06F; color: #fff; text-shadow: 0px 1px 0px #000;}
.ui-datepicker-calendar .ui-state-hover { background: #f7f7f7;}

</style>

<script type="text/javascript">
function envia_tranca() {
	document.forms['form1'].submit();
	document.forms['form1'].elements['pesquisaRel'].disabled = true;
}

function CheckAllEquipamento() {
 for (var i=0;i<document.formAll.elements.length;i++) {
 var x = document.formAll.elements[i];
 if (x.name == 'MultiplosDadosFiltro') {
 x.checked = document.formAll.filtroALL.checked;
 }
	}
}

$(function(){
 $('#dataIni').datepicker({
 dateFormat: 'dd/mm/yy',
 dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado'],
 dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
 dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
 monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
 monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],
 nextText: 'Próximo',
 prevText: 'Anterior',
 showOtherMonths:true,
 selectOtherMonths: false,
 changeMonth:true,
 changeYear:true,
 showOn:"button",
 buttonImage: "./img/calendar_icon.png",
 buttonImageOnly: true,
 onSelect: function(dateText, inst) {
 $("input[name='dataIni']").val(dateText);
 }
 });
});

$(function(){
 $('#dataFin').datepicker({
 dateFormat: 'dd/mm/yy',
 dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado'],
 dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
 dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
 monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
 monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],
 nextText: 'Próximo',
 prevText: 'Anterior',
 showOtherMonths:true,
 selectOtherMonths: false,
 changeMonth:true,
 changeYear:true,
 showOn:"button",
 buttonImage: "./img/calendar_icon.png",
 buttonImageOnly: true,
 onSelect: function(dateText, inst) {
 $("input[name='dataFin']").val(dateText);
 }
 });
});

function Formatadata(Campo, teclapres)

{

	var tecla = teclapres.keyCode;
	var vr = new String(Campo.value);
	vr = vr.replace("/", "");
	vr = vr.replace("/", "");
	vr = vr.replace("/", "");
	tam = vr.length + 1;
	if (tecla != 8 && tecla != 8)
	{
 if (tam > 0 && tam < 2)
 Campo.value = vr.substr(0, 2) ;
 if (tam > 2 && tam < 4)
 Campo.value = vr.substr(0, 2) + '/' + vr.substr(2, 2);
 if (tam > 4 && tam < 7)
 Campo.value = vr.substr(0, 2) + '/' + vr.substr(2, 2) + '/' + vr.substr(4, 7);
	}
}

function dois_pontos(tempo){
 if(event.keyCode<48 || event.keyCode>57){
 event.returnValue=false;}
 if(tempo.value.length==2){
 tempo.value+=":";}
}

function valida_horas(tempo){
 while (tempo.value.length < 5){
 if(tempo.value.length==2 || tempo.value.length==5){
 tempo.value+=":";}
 tempo.value+="0";}

 horario = tempo.value.split(":");
 var horas = horario[0];
 var minutos = horario[1];

if(horas > 24){ //para relógio de 12 horas altere o valor aqui
submit.disabled = true;relogio.focus();//fica nome_do_form.submit.disabled caso você insira um form ali em baixo
Break;}

if(minutos > 59){
 submit.disabled = true;relogio.focus();
 Break;}
 submit.disabled = false;
}

	</script>

<script type="text/javascript">
function mostra() {
	document.getElementById('conteudo').style.display = 'block';
}
function esconde() {
	document.getElementById('conteudo').style.display = 'none';
}
</script>

<script type='text/javascript'>
function abrefechaFiltro() {
	if(filtro.style.display == "none") {
 filtro.style.display = "block";
	} else {
 filtro.style.display = "none";
 }
}

function abrefechaMenu() {
	if(menu.style.display == "none") {
 menu.style.display = "block";
	} else {
 menu.style.display = "none";
	}
}
 </script>

<body>
<div id="container">

<a href="#" onmouseover="javascript:mostra();" onmouseout="esconde();">Teste</a>
	<div id="conteudo" style="display:none;">Conteudo do Menu</div>

	<div id="header"></div>

	<div id="logo"></div>

	<div id="mainContent">

	<div id="content"></div>

	<div id="dg"><a href="javascript:abrefechaFiltro()">Filtro Abre/Fecha</a></div><div id="filtro" style="display: none;">
 <div id="sidebar">
 <form name="formAll" action="ServletPGPM" method="post">
 <input type="hidden" id="msgRetornoFiltro" value="<c:out value="${msgRetornoFiltro}"/>"/>

 <div id="conteudoFiltro">

 <div>
 <div id="tituloAba">
 <p class="titulo">Filtros</p>
 </div>
 <div id="box">
 <table cellspacing="5" cellpadding="2" align="center">
 <tr>
 <td>
 <div id="comboVeiculo">
 <select name="cod_igreja" class="selectbox" style="width:100px;">
 <option value="0">VEÍCULO</option>
 <c:forEach var="e" items="${veiculo}">
 <option value="${e.cod_estado}" <c:if test="${e.cod_estado == param.meuparametrodobanco}">Selected=selected</c:if> > ${e.nom_estado}</option>
 </c:forEach>
 </select>
 </div>
 </td>
 </tr>
 <tr align="left">
 <td width="auto">
 <div class="esquerda">
 <div title="Data Inicial">Dt. Ini.: <input type="text" size="6" maxlength="10" id="dataIni" name="dataIni" onkeyup="Formatadata(this,event)"/></div>
 <br>
 <div title="Hora Inicial">Hr. Ini.: <input type="text" size="6" name="horaIni" maxlength="5" onkeypress="dois_pontos(this)" onBlur="valida_horas(this)"></div>
 <br>
 <div><INPUT TYPE=CHECKBOX id="filtroALL" onclick="CheckAllEquipamento()" name="filtroALL"><label for="filtroALL" class="" title="Selecionar todos os campos"> Selecionar tudo</label></div>
 <br>
 <div><INPUT TYPE=CHECKBOX id="VelocidadeInst" VALUE="VelocidadeInst" name="MultiplosDadosFiltro" class=""><label for="VelocidadeInst" class="" title="Velocidade Instantânea"> Vel. Instantânea</label></div>
 <div><INPUT TYPE=CHECKBOX id="VelocidadeMd" VALUE="VelocidadeMd" name="MultiplosDadosFiltro" class=""><label for="VelocidadeMd" class="" title="Velocidade Média"> Vel. Média</label></div>
 <br>
 <div><INPUT TYPE=CHECKBOX id="PosAcel" VALUE="PosAcel" name="MultiplosDadosFiltro" class=""><label for="PosAcel" class="" title="Posição do Acelerador"> Pos. do Acelerador</label></div>
 <div><INPUT TYPE=CHECKBOX id="RotMotor" VALUE="RotMotor" name="MultiplosDadosFiltro" class=""><label for="RotMotor" class="" title="Rotação do Motor"> Rot. do Motor</label></div>
 <div><INPUT TYPE=CHECKBOX id="RotMaxMotor" VALUE="RotMaxMotor" name="MultiplosDadosFiltro" class=""><label for="RotMaxMotor" class="" title="Rotação Máxima do Motor"> Rot. Máx. do Motor</label></div>
 </div>
 </td>
 <td width="auto">
 <div class="direita">
 <div title="Data Final">Dt. Fin.: <input type="text" size="6" maxlength="10" id="dataFin" name="dataFin" onkeyup="Formatadata(this,event)"/></div>
 <br>
 <div title="Hora Final">Hr. Fin.: <input type="text" size="6" name="horaFin" maxlength="5" onkeypress="dois_pontos(this)" onBlur="valida_horas(this)"></div>
 <br>
 <div></div>
 <br>
 <div><INPUT TYPE=CHECKBOX id="NvlCombus" VALUE="NvlCombus" name="MultiplosDadosFiltro" class=""><label for="NvlCombus" class="" title="Nível de Combustível"> Nvl. de Combustível</label></div>
 <div><INPUT TYPE=CHECKBOX id="EficCombus" VALUE="EficCombus" name="MultiplosDadosFiltro" class=""><label for="EficCombus" class="" title="Eficiência do Combustível"> Efic. do Combustível</label></div>
 <div><INPUT TYPE=CHECKBOX id="DistPerc" VALUE="DistPerc" name="MultiplosDadosFiltro" class=""><label for="DistPerc" class="" title="Distância Percorrida"> Dist. Percorrida</label></div>
 <br>
 <div><INPUT TYPE=CHECKBOX id="TempViagem" VALUE="TempViagem" name="MultiplosDadosFiltro" class=""><label for="TempViagem" class="" title="Tempo de Viagem"> T. de Viagem</label></div>
 <div><INPUT TYPE=CHECKBOX id="TempVeicParado" VALUE="TempVeicParado" name="MultiplosDadosFiltro" class=""><label for="TempVeicParado" class="" title="Tempo do Veículo Parado"> T. do Veíc. Parado</label></div>
 <div><INPUT TYPE=CHECKBOX id="TempVeicFunc" VALUE="TempVeicFunc" name="MultiplosDadosFiltro" class=""><label for="TempVeicFunc" class="" title="Tempo do Veículo Funcionamento"> T. do Veíc. Func.</label></div>
 </div>
 </td>
 </tr>
 </table>
 <br>
 <center>
 <div><input name="pesquisaRel" id="pesquisaRel" type="submit" value="Pesquisar"/></div>
 </center>
 <br>
 <div class="clear"></div>
 </div>
 </div>
 </div>

 </form>
 </div>

	</div>

<div id="dg"><a href="javascript:abrefechaMenu()">Menu Abre/Fecha</a></div>
<div id="menu" style="display: none;">

<div id="nav">
 <!-- menu -->
 <ul>
 <li><a href="#" class="menu-option" id="home">Home</a></li>
 <li><a href="#" class="menu-option" id="perfilMotorista.jsp">Perfil Motorista</a></li>
 <li><a href="#" class="menu-option" id="page2">Page 2</a></li>
 </ul>
 </div>

</div>

	</div>

// RESULTADO DO SERVLET
<c:if test="${MultiplosDadosAtuais2}">

 <table>
 <tr>
 <td class="consultado" style="visibility:hidden;">Consultado por <c:out value='${MultiplosDadosAtuais2 != null ? MultiplosDadosAtuais2 : "---"}'/></td>
 </tr>
 </table>
 </c:if>

</div>

</body>

</html>

Hodnan· 28 de nov.

Estou com um problema semelhante.

tenho um template que já carrega os conteúdos em div via jquery e preciso carregar um segundo conteúdo dentro de uma pagina já carregada dentro de uma div, se rodo por for a funciona bem, mas quando carrego dentro da div já carregada...

Rodrigo Biaggio· 9 de mar.

Senhores, e se eu tiver abas dinâmicas?

paikoala· 18 de jun.

Gelera me tira uma dulvida, no caso tenho uma das paginas a ser carregadas que tem um slide que é um menu de bandas, esse menu contem a href que carrega as informações da banda em um div abaixo do menu. tentei algumas tecnicas para carregar as informações dessas paginas nas divs como tem aqui nesse topico mas o slide para de funcionar. alguem sabe o porque?será que os codigos de js estão entrando em conflito?ou o erro é chamar esses codigos no index?

AndersonMamede· 20 de jun.

Gelera me tira uma dulvida, no caso tenho uma das paginas a ser carregadas que tem um slide que é um menu de bandas, esse menu contem a href que carrega as informações da banda em um div abaixo do menu. tentei algumas tecnicas para carregar as informações dessas paginas nas divs como tem aqui nesse topico mas o slide para de funcionar. alguem sabe o porque?será que os codigos de js estão entrando em conflito?ou o erro é chamar esses codigos no index?

Melhor você criar um tópico específico para seu problema, esse aqui é de 2011...

Hromeus· 25 de jun.

Estou iniciando na programação web, já tenho certa experiência na programação desktop e estou com um problema ao carregar uma página em um div, já consegui fazer carregar tudo certo mas cada vez que carrego uma página diferente os estilos das divs acima também são alterados, fiz uma div principal com 3 subdivisões (titulo, menu e corpo).

No menu é aplicado um CSS, e os links são carregados no corpo mas cada vez que carrego uma página o estilo do menu é alterado e perde a formatação do CSS, o menu diminui de tamanho e os textos ficam sobrepostos.

Será que alguém sabe porque? o que estou fazendo de errado!

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
 <link href="estilos/estilosMenuPrincipal.css" rel="stylesheet" type="text/css" />
 <script src="script/jquery-3.0.0.min.js" type="text/javascript"></script>
 <script src="script/funcoes.js" type="text/javascript"></script>
 <title>SIS-XXXX</title>

 </head>

 <body>

 <div id="principal" class="divPrincipal">
 <div id="titulo" class="divTitulo">TITULO</div>
 <div id="barraMenu" class="barraMenu">
 <ul class="menu" id="menu"> <!-- Esse ï¿½ o 1 nivel ou o nivel principal -->
 <li><a href="inicio.html">Home</a></li>
 <li><a href="#">Associados</a>
 <ul class="submenu-1">
 <li><a onclick="carregar('inscricao.html')" href="#"> Cadastrar </a></li>
 <li><a onclick="carregar('controleVisao.do?acao=consultarU')" href="#"> Consultar </a></li>
 </ul>
 </li>
 </ul>
 </div>

 <div id="corpo" class="divCorpo"></div>
 </div>
 </body>
</html>

function carregar(pagina){
 $("#corpo").load(pagina);
}

AndersonMamede· 27 de jun.

Hromeus

Se as páginas que você está carregando nas DIV tiverem código CSS (seja no meio do HTML ou referenciando arquivo .css), esse CSS poderá ser aplicado à TUDO que estiver na página (dependendo do seletor).

E se essas páginas tiverem as tags html/head/body/etc, seu código está inválido. Você não pode ter página dentro de página desta forma. Se o browser está exibindo corretamente é porque ele fez (ou tentou fazer) as correções. Mas quando o código é inválido, fora dos padrões e das regras do HTML, cada browser interpreta como bem entender, sendo que alguns nem mesmo vão interpretar. Aí começa a surgir diferenças entre os browsers, em um browser o site aparece normal, no outro não, e para corrigir normalmente utilizam alguns "hacks" que só fazem piorar.

Sugiro você utilizar um validador de HTML para ver como está seu código, ele vai te ajudar a evitar inúmeros problemas: https://validator.w3.org/nu/#textarea

E se você realmente quiser e precisar exibir uma página dentro de outra página, e essas páginas tiverem as tags html/head/body, então utilize a tag iframe que assim seu HTML será válido e não terá problemas com sobrescrita no CSS.