Divs invisíveis com JavaScript

Para usar o truque das ‘divs invisíveis’, basta utilizar uma pequena função JavaScript que fará a mágica acontecer.

O que o código realiza, é ocultar uma div que não necessite ser visualizada, dando lugar a uma outra, com base no clique em um link, imagem ou mouseover.

Para isso temos a função JavaScript (existem muitos modos de se realizar essa tarefa), que deve ser colocada entre as tags ‘head’:

JavaScript

function mostraDiv(id,div2)
{
var divstyle = new String();
divstyle = document.getElementById(id).style.display;

var divAux = new String();
divAux = document.getElementById(div2).style.display;

      if (divAux=="block" || divAux == ""){
       document.getElementById(div2).style.display = "none";
    }   

    document.getElementById(id).style.display = "block";
    return false;
}

O que o código está realizando, é uma situação na qual ele verifica se existe uma div já sendo exibida, caso esteja, ele coloca ela como “none” (invisível) e seta a div desejada como “block” (visível). Ao utilizar o block/none ao invés do visibility:hidden/visibility:visible, nós tiramos o espaço alocado para a div que está invisível, tornando-a imperceptível ao usuário que estiver na página.

Para utilizar na sua página, basta incluir o HTML abaixo:

HTML

<a href="#" onclick="displayDiv('teste','teste2')"> </a>
<a href="#" onclick="displayDiv('teste2','teste')"> </a> 

<div id="teste">
  teste
</div>

<div id="teste2" style="display:none;">
  teste2
</div>

Fonte: http://msdn.microsoft.com/pt-br/library/hh475808.aspx

Anúncios

Deixe um comentário

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