Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

José Gustavo;

[Resolvido] Trocar conteúdo da DIV

Recommended Posts

Tenho uma DIV com vários links. Quero que ao clicar num link desses o conteúdo dessa mesma div mude, e que nesse novo conteúdo tenho um link pra voltar pro conteúdo original da div. Alguém pode me ajudar dando um exemplo? Não entendo muito de java, só mais sobre html e css. Se alguém puder dar um exemplo ai eu adapto aqui...

 

esse é o css:

.menu2 {
font-family: verdana;
padding: 4px;
padding-left: 10px;
font-size: 11px;
border-radius: 7px;
background-image: url("fundomenus.png");
width: 191px;
height: auto;
margin-left: 16px;
margin-top: 3px

 

e esse o html:

<div class=menu2>
<b><font color="white" size=2> Site</font></b>
<br><br>
<a href="" style="line-height: 17px;">Informações Gerais</a><br>
<a href="" style="line-height: 17px;">Regras</a><br>
<a href="" style="line-height: 17px;">Como fazer um pedido</a><br>
<a href="" style="line-height: 17px;">Tabela de Preços</a>
</div>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Deixe o codigo assim

 

<div class=menu2>
<b><font color="white" size=2> Site</font></b>
<br><br>
<a href="#" style="line-height: 17px;" onclick="abrirPag("pagina1.html");">Informações Gerais</a><br>
<a href="#" style="line-height: 17px;" onclick="abrirPag("pagina2.html");">Regras</a><br>
<a href="#" style="line-height: 17px;" onclick="abrirPag("pagina3.html");">Como fazer um pedido</a><br>
<a href="#" style="line-height: 17px;" onclick="abrirPag("pagina4.html");">Tabela de Preços</a>
</div>
<div id="conteudo"> </div>

Coloque isso tambêm

 

<script type="text/javascript">
function GetXMLHttp() {  
    if(navigator.appName == "Microsoft Internet Explorer") {  
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
    } else {  
    xmlHttp = new XMLHttpRequest();  
    }      
    return xmlHttp;  
}  
var xmlRequest = GetXMLHttp();  

function abrirPag(valor){  
var url = valor;  
xmlRequest.open("GET", url, true);  
xmlRequest.onreadystatechange = mudancaEstado;  
xmlRequest.send(null);  
if (xmlRequest.readyState == 1) {  
document.getElementById("conteudo").innerHTML = "...";  
}  
return url;  
}  
function mudancaEstado(){  
if (xmlRequest.readyState == 4){  
document.getElementById("conteudo").innerHTML = xmlRequest.responseText;  
}  
}  
</script>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Deixe o codigo assim

 

<div class=menu2>
<b><font color="white" size=2> Site</font></b>
<br><br>
<a href="#" style="line-height: 17px;" onclick="abrirPag("pagina1.html");">Informações Gerais</a><br>
<a href="#" style="line-height: 17px;" onclick="abrirPag("pagina2.html");">Regras</a><br>
<a href="#" style="line-height: 17px;" onclick="abrirPag("pagina3.html");">Como fazer um pedido</a><br>
<a href="#" style="line-height: 17px;" onclick="abrirPag("pagina4.html");">Tabela de Preços</a>
</div>
<div id="conteudo"> </div>

Coloque isso tambêm

 

<script type="text/javascript">
function GetXMLHttp() {  
    if(navigator.appName == "Microsoft Internet Explorer") {  
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
    } else {  
    xmlHttp = new XMLHttpRequest();  
    }      
    return xmlHttp;  
}  
var xmlRequest = GetXMLHttp();  

function abrirPag(valor){  
var url = valor;  
xmlRequest.open("GET", url, true);  
xmlRequest.onreadystatechange = mudancaEstado;  
xmlRequest.send(null);  
if (xmlRequest.readyState == 1) {  
document.getElementById("conteudo").innerHTML = "...";  
}  
return url;  
}  
function mudancaEstado(){  
if (xmlRequest.readyState == 4){  
document.getElementById("conteudo").innerHTML = xmlRequest.responseText;  
}  
}  
</script>

 

Daí eu crio um arquivo novo para cada link com o conteúdo deles?

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.