Esconder e Mostrar DIV’s


Este script é bem simplesinho mas de grande utilidade.

Nos exemplos estou utilizando 3 divs, com ID’s diferentes.

<script>
function OpenSel(op) {

if (op == 1) {
document.getElementById('principal').style.display="block";
document.getElementById('divum').style.display="none";
document.getElementById('divdois').style.display="none";
}else if (op == 2) {
document.getElementById('principal').style.display="none";
document.getElementById('divum').style.display="block";
document.getElementById('divdois').style.display="none";
}else {
document.getElementById('principal').style.display="none";
document.getElementById('divum').style.display="none";
document.getElementById('divdois').style.display="block";
}
}
</script>
<div id="principal">
<a href="#" onclick="OpenSel(2);">Mostrar DIV 1</a>

<a href="#" onclick="OpenSel(3);">Mostrar DIV 2</a>
</div>
<div id="divum" style="display:none;">MOSTRAR DIV NÚMERO UM<a href="#" onclick="OpenSel(1);">VOLTAR MENU PRINCIPAL</a></div>
<div id="divdois" style="display:none;">MORTRAR DIV NÚMERO DOIS<a href="#" onclick="OpenSel(1);">VOLTAR MENU PRINCIPAL</a></div>

Outra maneira de fazer este código é utilizando CASE em javascript, veja:

<script>
function abrefecha(obj) {

switch (obj.id) {
case 'primeiro':

document.getElementById('principal').style.display="block";
document.getElementById('divum').style.display="none";
document.getElementById('divdois').style.display="none";

break
case 'segundo':

document.getElementById('principal').style.display="none";
document.getElementById('divum').style.display="block";
document.getElementById('divdois').style.display="none";

break

case 'terceiro':

document.getElementById('principal').style.display="none";
document.getElementById('divum').style.display="none";
document.getElementById('divdois').style.display="block";

break
}
}
</script>
<div id="principal">
<a href="#" id="segundo" onclick="abrefecha(this);">Mostrar DIV 1</a>

<a href="#" id="terceiro" onclick="abrefecha(this);">Mostrar DIV 2</a>
</div>
<div id="divum" style="display:none;">MOSTRAR DIV NÚMERO UM<a href="#" id="primeiro" onclick="abrefecha(this);">VOLTAR MENU PRINCIPAL</a></div>
<div id="divdois" style="display:none;">MORTRAR DIV NÚMERO DOIS<a href="#" id="primeiro" onclick="abrefecha(this);">VOLTAR MENU PRINCIPAL</a></div>

Espero que tenham gostado!

Abraços.

Publicado em 17 de dezembro de 2008, em JavaScript e marcado como . Adicione o link aos favoritos. 1 comentário.

  1. Simples e eficaz, perfeito!

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: