Tweet
Então pessoal, andei pesquisando e vi que tem como esconder e mostrar divs por DOM e JavaScript.
Vou citar o exemplo abaixo:
Ao cllicar no nome "Clique aqui" uma div é exibida e ao clicar nessa div ela some. Gostaria de saber se é possível ao clicar nessa div vermelha , fazer com que abra outra div no mesmo lugar com outro conteúdo.
Se puderem me ajudar agradeço
Vou citar o exemplo abaixo:
Ao cllicar no nome "Clique aqui" uma div é exibida e ao clicar nessa div ela some. Gostaria de saber se é possível ao clicar nessa div vermelha , fazer com que abra outra div no mesmo lugar com outro conteúdo.
Se puderem me ajudar agradeço
<html>
<head>
<title>Mostrar janela</title>
<style type="text/css">
#oculta{
display:none;/*propriedade em CSS que define o modo de exibição do elemento, neste caso deixa o elemento oculto*/
background:red;
width:150px;
}
</style>
<script type="text/Javascript">
function mostra(id){/*inicia a função mostrar, recebendo um valor e armazenando na variável id*/
var elemento=document.getElementById(id);/*captura o elemento que possui o id especificado na variável id, e armazena na variável elemento*/
elemento.style.display="block";/*atribui ao elemento armazanado na variável elemento, o valor block na propriedade display, possibilitando a exibição*/
}
function ocultar(id){/*inicia a função ocultar, recebendo um valor e armazenando na variável id*/
var elemento=document.getElementById(id);/*captura o elemento que possui o id especificado na variável id, e armazena na variável elemento*/
elemento.style.display="none";/*atribui ao elemento armazanado na variável elemento, o valor none na propriedade display, impossibilitando a exibição*/
}
</script>
<body>
<div onclick="mostra('oculta');">Clique aqui!</div><!-- No evento onclick chama a função mostra passando o id do elemento a sofrer as alterações -->
<div id="oculta">
Esta DIV estava oculta.<br/>
<i onclick="ocultar('oculta');">Clique aqui para oculta-la novamente.</i><!-- No evento onclick chama a função ocultar passando o id do elemento a sofrer as alterações -->
<div onclick="mostra"
</div>
</body>
</html>
<head>
<title>Mostrar janela</title>
<style type="text/css">
#oculta{
display:none;/*propriedade em CSS que define o modo de exibição do elemento, neste caso deixa o elemento oculto*/
background:red;
width:150px;
}
</style>
<script type="text/Javascript">
function mostra(id){/*inicia a função mostrar, recebendo um valor e armazenando na variável id*/
var elemento=document.getElementById(id);/*captura o elemento que possui o id especificado na variável id, e armazena na variável elemento*/
elemento.style.display="block";/*atribui ao elemento armazanado na variável elemento, o valor block na propriedade display, possibilitando a exibição*/
}
function ocultar(id){/*inicia a função ocultar, recebendo um valor e armazenando na variável id*/
var elemento=document.getElementById(id);/*captura o elemento que possui o id especificado na variável id, e armazena na variável elemento*/
elemento.style.display="none";/*atribui ao elemento armazanado na variável elemento, o valor none na propriedade display, impossibilitando a exibição*/
}
</script>
<body>
<div onclick="mostra('oculta');">Clique aqui!</div><!-- No evento onclick chama a função mostra passando o id do elemento a sofrer as alterações -->
<div id="oculta">
Esta DIV estava oculta.<br/>
<i onclick="ocultar('oculta');">Clique aqui para oculta-la novamente.</i><!-- No evento onclick chama a função ocultar passando o id do elemento a sofrer as alterações -->
<div onclick="mostra"
</div>
</body>
</html>
Comment