Ir para conteúdo

POWERED BY:

Arquivado

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

aussie

[Resolvido] Sobreposicao de div's

Por , em Javascript

Recommended Posts

aussie    0

aussie
Postado

Ola,

 

minha pagina tera varios <div>'s e ao clicar nos items do menu o <div> correspondente devera ficar visivel e os demais deverao desaparecer.

 

Soh que esses <div>'s serao gerados dinamicamente, usando JSP.

 

Existe um jeito de colocar todos os <div>'s na mesma posicao na pagina, assim quando um estivesse visivel iria 'cobrir' os demais?

Ou uma funcao que deixa todos os <div>'s de uma pagina invisiveis?

Compartilhar este post

Link para o post
Compartilhar em outros sites

GuttoSP    2

GuttoSP
Postado

Você pode usar getElementsByTagName para pegar as divs, e em seguida alterar o style.visibility, style.display. Coloque ids para identificar cada div individualmente.

Compartilhar este post

Link para o post
Compartilhar em outros sites

aussie    0

aussie
Postado

Essa solucao eh perfeita se eu estivesse fazendo uma pagina estatica. Mas o problema eh que eu nao sei o nome das minhas <div>'s antes da pagina ser carregada.

Por isso estava pensando em sobrepor as <div>'s, assim nao precisaria me preocupar em 'mostrar'/'esconder' as <div>'s individualmente.

 

-----------------------------------------------------------------------------------

Post Mesclado

-----------------------------------------------------------------------------------

 

Você pode usar getElementsByTagName para pegar as divs, e em seguida alterar o style.visibility, style.display. Coloque ids para identificar cada div individualmente.

Guto, tentei fazer um teste usando essas funcoes que voce mostrou, so para ver como ficava:

<html>

 <head>
  <link rel="StyleSheet" href="DivTest.css" type="text/css">

	<script type="text/javascript">
		<!--		  
		  function activateDiv(divName) {
			  var actDiv=getElementById(divName);
			  actDiv.style.display="block";
		  }
		  
		//-->		
	</script>

 </head>

 <body>

  <em> Testing divs </em> <br/>

  <div id='div1' class="div_class_show">
   This is div 1
  </div>
  <div id='div2' class="div_class_hiden">
   This is div 2
  </div>
  <div id='div3' class="div_class_hiden">
   This is div 3
  </div>  

  <br/>

  <a href="java script:activateDiv('div3')">
   div 3
  </a>


 </body>
</html>

Mas nao mostra o div3. Sera que voce podia me mostrar como eu uso esse style.display ?

Valeu!

Compartilhar este post

Link para o post
Compartilhar em outros sites

GuttoSP    2

GuttoSP
Postado

Veja se é isso:

<html>
<head>
<link rel="StyleSheet" href="DivTest.css" type="text/css">
<script type="text/javascript">
<!--
	function activateDiv(div) {
	//alert(div);
		var divs = document.getElementsByTagName('div');
		for (var i = 0; i < divs.length; i++) {
			if (divs[i].className == 'div_class_show') {
				divs[i].className = "div_class_hiden";
			}
		}
		document.getElementById(div).className = "div_class_show";
	}
//-->
</script>
</head>

<body>
<style type="text/css">
<!--
.div_class_show { display:block; }
.div_class_hiden { display:none; }
-->
</style>
<em> Testing divs </em> <br/>

<div id='div1' class="div_class_hiden">
This is div 1
</div>
<div id='div2' class="div_class_hiden">
This is div 2
</div>
<div id='div3' class="div_class_hiden">
This is div 3
</div>
<br>
<br>
<br>
<a href="java script:activateDiv('div1');">
 div 1 
</a> | 
<a href="java script:activateDiv('div2');">
 div 2 
</a> | 
<a href="java script:activateDiv('div3');">
 div 3 
</a>

Em seguida teste alterando o css, como abaixo:

<style type="text/css">
<!--
.div_class_show { visibility:show; }
.div_class_hiden { visibility:hidden; }

-->
</style>

Para entender a diferença, confira o link abaixo:

Diferença entre Display:none e visibility:hidden

Compartilhar este post

Link para o post
Compartilhar em outros sites

aussie    0

aussie
Postado

Ah Guto, agora entendi o seu esquema.

 

esse getElementsByTagName vai retornar uma array com todos os elementos de uma determinada tag. Muito bom! era exatamente o que eu estava procurando.

 

Valeu pelo exemplo!

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