Ir para conteúdo

POWERED BY:

Arquivado

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

LAPSrj

[Resolvido] Fazer div desaparecer ao clicar

Por , em Javascript

Recommended Posts

LAPSrj    0

LAPSrj
Postado

Boa tarde!

 

Eu não tenho conhecimentos em javascript, mas resolvi me aventurar um pouco e estou há 3 horas tentando fazer uma coisa que acho ser simples mas não consigo fazer funcionar corretamente. E enquanto pesquisava encontrei muitas informações úteis neste fórum e por isso vim pedir ajuda para vocês.

 

O meu problema é o seguinte: eu quero fazer com que, ao clicar em um dos ítens de um menu, a div que está aparecendo iria sumir e apareceria a div com o outro conteúdo. Eu até consegui fazer isso, mas a div só desaparecia da primeira vez(quando eu clicava no primeiro link o conteúdo desaparecia e aparecia o outro, mas quando eu clicava em outro link o conteúdo ficava em cima da outro).

 

A lógica que eu tentei usar foi: Quando clicar em um link ele vai deixar o conteúdo de uma div que engloba todas as outras invisível e depois vai deixar a div que eu quero visível. Eu cheguei ao código abaixo, que "funcionava" até uma hora atrás(agora ele só tá deixando o conteúdo invisível)(talvez o código que funcionava não seja exatamente esse, mas algo muito parecido):

 

<script language="javascript">
function hide(){
document.getElementById('dados').style.visibility = 'hidden';
}
function show(div_s){
document.getElementById(div_s).style.visibility = 'visible';
}
</script>

<div id="dados">
	<div id="t1">
            	Texto 1
        </div>
   	<div id="t2">
        	Texto 2
   	</div>
        <div id="t3">
       		Texto 3
   	</div>
</div>

<ul>
	<li><a href="#" onclick="hide(); show('t1')">Mostrar T1</a></li>
	<li><a href="#" onclick="hide(); show('t2')">Mostrar T2</a></li>
	<li><a href="#" onclick="hide(); show('t3')">Mostrar T3</a></li>
</ul>

Alguém sabe como me ajudar? E desde já obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

dei uma modificada, tenta estudar:

<html><head>	<title></title>	<script type="text/javascript">	function hide_all(){		var divs = id('dados').getElementsByTagName('div');//pega os elementos DIV dentro de #dados		for( var i=0; i<divs.length; i++ )		{			divs[i].style.visibility = 'hidden';//esconde div por div		}	}	function show(div_s){		hide_all();		id( div_s ).style.visibility = 'visible';	}	function id( el ){		return document.getElementById( el );	}	window.onload = function()	{		hide_all();//começa com todas escondidas	}	</script>	<style type="text/css">	</style></head><body>	<div id="dados">		<div id="t1">			Texto 1		</div>		<div id="t2">			Texto 2		</div>		<div id="t3">			Texto 3		</div>	</div>	<ul>		<li><a href="#" onclick="show('t1')">Mostrar T1</a></li>		<li><a href="#" onclick="show('t2')">Mostrar T2</a></li>		<li><a href="#" onclick="show('t3')">Mostrar T3</a></li>	</ul>	</body></html>
qq coisa pergunta..

mas as modificações mais significativas, foi o apelido que criei para document.getElementById(), e em vez de esconder o container #dados, esconder os elementos dentro ele ( #dados > div ).

 

Por isso o teu não funcionava:

Se você tentar mostrar um elemento dentro de um container que tá escondido, não tem como ver mesmo Imagem Postada

 

Se não quiser que ocupem espaço, prefira a propriedade css display: none|block;

Compartilhar este post

Link para o post
Compartilhar em outros sites

LAPSrj    0

LAPSrj
Postado

Muito obrigado William, resolveu meu problema, você em 10 minutos conseguiu fazer funcionar uma coisa que eu não consegui em mais de 3 horas.

 

O comando funcionou direitinho mas a div que apareceria inicialmente começava invisível, então eu coloquei o comando onload="show('dicasdeseguranca')" na tag body e resolveu o problema. Eu também substitui de visibility para display.

 

Mais uma vez, obrigado William.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

uma boa prática, para não misturar js com html..

é chamar no js tb:

window.onload = function()        {                hide_all();//começa com todas escondidas                show('dicasdeseguranca');        }
ai você não precisa fazer:
<body onload="show('dicasdeseguranca');">
ai a tag body, pode ficar:

<body>
Imagem Postada

Compartilhar este post

Link para o post
Compartilhar em outros sites

gRoOvE    0

gRoOvE
Postado

Achei interessante o uso do apelido para document.getElementById() e a chamada do window.onload dentro do js, deixa o body limpo Imagem Postada

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito