Ocultar uma DIV quando outra é aberta

Jesus_Te_Ama! · Janeiro 16, 2009

Olá...

Estou montando um site, e estou com um probleminha no meu menu.

:mellow:

Eu quero (e preciso) que ele fique assim:

LINK1

SUB-LINK 1.1

texto

SUB-LINK 1.2

texto

SUB-LINK 1.3

texto

LINK2

SUB-LINK 2.1

texto

SUB-LINK 2.2

texto

SUB-LINK 2.3

texto

...

É um menu com 4 links principais, dentro de cada um desses links há vários outros links, que quando acessados devem abrir um texto embaixo deles.

<_<

Consegui colocar parte desse menu para funcionar. As DIVs abrem normalmente, apresentando os respectivos textos. Mas ae, quando a próxima DIV é aberta, a que foi aberta anterirmente não fecha.

:unsure:

Por exemplo: Abri o TÍTULO 1 e o texto dele apareceu embaixo. Perfeito! Ao abrir o TÍTULO 2, a div do título1 deveria se fechar automaticamente. Mas não fecha...

http://forum.imasters.com.br/public/style_emoticons/default/upset.gif

Eu usei um script pronto que consegui aqui mesmo no IMasters, e fiz as adaptações para o modelo do site... Quando usei apenas uma frase pra testar as DIVs, deu certo. Mas quando aumentei o tamanho dos textos, não funcionou...

:blink:

Vou postar meu HTML com essas alterações, pra vocês entenderem o que estou falando (ou melhor, escrevendo)...

http://forum.imasters.com.br/public/style_emoticons/default/closedeyes.gif

AE, se alguém puder me dizer o que está errado, eu ficarei muuuuuuito, mas muuuuuuuuuito grata!

:rolleyes:

<div id="Layer3" style="position: absolute; top: 335; left: 197; width: 426; height: 595; overflow: auto" z-index: 3>


<!-- SCRIPT DOS SUB-LINKS -->

<script LANGUAGE="javascript"> 

function sub1_abre(tabela){
	tabela = document.getElementById(tabela);
	if(tabela.style.display="none"){
	        tabela.style.display="block";
	    } else {
	        tabela.style.display="none";
	    }
}


</SCRIPT>



<!-- SCRIPT DO MENU PRINCIPAL -->

<script type="text/javascript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
  function startmenu()
  {
	  menu0.style.display = "none";
	  menu1.style.display = "none";
	  menu2.style.display = "none";
	  menu3.style.display = "none";
  }
  
  function menu0func()
  {
	  if(menu0.style.display == "none")
	  {
		  startmenu();
		  menu0.style.display = "block";
	  }
	  else
	  {
		  startmenu();
	  }
  }
  function menu1func()
  {
	  if(menu1.style.display == "none")
	  {
		  startmenu();
		  menu1.style.display = "block";
	  }
	  else
	  {
		  startmenu();
	  }
  }
  function menu2func()
  {
	  if(menu2.style.display == "none")
	  {
		  startmenu();
		  menu2.style.display = "block";
	  }
	  else
	  {
		  startmenu();
	  }
  }
  function menu3func()
  {
	  if(menu3.style.display == "none")
	  {
		  startmenu();
		  menu3.style.display = "block";
	  }
	  else
	  {
		  startmenu();
	  }
  }
  
 //  End -->
</script>

</HEAD>

<BODY onLoad="java script:startmenu()">

<br>

<p align="center">

<table border="0" cellpadding="0" cellspacing="0" width="400" id="AutoNumber1" style="border-collapse: collapse" bordercolor="#111111">
  <tr>
	<td width="400" align="left" border="0" >

		<a href="java script:menu0func()" style="text-decoration: none">
		 <font color="#5A5624">Palavras de Refrigério</font></a>
	  </font></b>

	  <div id="menu0" style="position: relative; left: 17">
	  
		<font color="#5A5624" size="2" face="Century Gothic">  
	  <font face="Times New Roman" color="#996600" size="4">▪</font>
		<a href="java script:sub1_abre('tabela1');"  style="text-decoration: none">
		   <font color="#5A5624">Contra a tristeza... </font>
		</a>
		   <div id="tabela1" style="display:none; text-align:justify; position: relative; left: 30">
			<br>  
			 <font face="Century Gothic" color="#996600" size="2">  
			   Lembro-me da minha aflição e do meu delírio,<br>
			   da minha amargura e do meu pesar.<br>
			   Lembro-me bem disso tudo,<br>
			   e a minha alma desfalece dentro de mim.<br>
			   Todavia, lembro-me também <br>
			   do que pode me dar esperança:<br>
			   Graças ao grande amor do SENHOR<br>
			   é que não somos consumidos,<br>
			   pois as Suas misericórdias são inesgotáveis.<br>
			   Renovam-se cada manhã;<br>
			   grande é a Sua fidelidade!<br>
			   ...<br>
			   (Lamentações 3.19-40)
			 </font>
			<br>  
		   </div>  
	  </font>
			
   <br>
	  
		<font color="#5A5624" size="2" face="Century Gothic">  
	  <font face="Times New Roman" color="#996600" size="4">▪</font>
		<a href="java script:sub1_abre('tabela2');"  style="text-decoration: none">
		   <font color="#5A5624">Quando em perigo... </font>
		</a>
		   <div id="tabela2" style="display:none; text-align:justify; position: relative; left: 30">
			<br>  
			 <font face="Century Gothic" color="#996600" size="2">  
			   Aquele que habita no abrigo do Altíssimo<br>
			   e descansa à sombra do Todo-Poderoso<br>
			   pode dizer ao SENHOR:<br>
			   <i>Tu és o meu refúgio e a minha fortaleza,<br>
			   o meu Deus, em Quem confio.</i><br>
			   Ele o livrará do lço do caçador<br>
			   e do veneno mortal.<br>
			   Ele o cobrirá com as suas penas,<br>
			   e sob as Suas asas você encontrará refúgio;<br>
			   a fidelidade Dele será o seu escudo protetor.<br>
			   Você ão temerá o pavor da nite,<br>
			   nem a flecha que voa de dia,<br>
			   nem a peste que se move sorrateira nas trevas,<br>
			   nem a praga que devasta ao meio-dia.<br>
			   ...<br>
			   (Salmos 91)
			 </font>
			<br>  
		   </div>  
	  </font>
			
   </div>

							 <!------ DAQUI PARA FRENTE NÃO TEM FORMATAÇÃO AINDA...   ------>

	  <a href="java script:menu1func()" style="text-decoration: none">
	  <font color="#5A5624">Onde encontrar...</font></a><font color="#5A5624">
	  </font></font></b>

	  <div id="menu1" style="position: relative; left: 17">
	  <font face="Times New Roman" color="#996600">▪</font>
	  <font face="Century Gothic" size="2"> 
	  <a href='http://www.webreference.com/' style="text-decoration: none">
	  <font color="#5A5624">Os Dez Mandamentos</font></a><font color="#5A5624"><br>
	  </font></font><font face="Times New Roman" color="#996600">▪</font><font face="Century Gothic" size="2"><font color="#5A5624">
	  </font> 

	   </div>

	  <a href="java script:menu2func()" style="text-decoration: none">
	  <font color="#5A5624">Pense nisso...</font></a><font color="#5A5624">
	  </font></font></b>

	  <div id="menu2" style="position: relative; left: 17">
	  <font face="Times New Roman" color="#996600">▪</font>
	  <font face="Century Gothic" size="2"> 

	  <a href='http://www.thecounter.com/' style="text-decoration: none">
	  <font color="#5A5624">Trabalho</font></a><font color="#5A5624"><br>
	  </font></font><font face="Times New Roman" color="#996600">▪</font><font face="Century Gothic" size="2"><font color="#5A5624">
	  </font> 

	   </div>

	</td>
  </tr>
</table>
</p>

<!-- Script Size:  3.83 KB -->

</div>

http://forum.imasters.com.br/public/style_emoticons/default/excl.gif Por favor, será que alguém pode me socorrer?

Preciso urgente de um HELP... Please!

Obrigada, de coração... e que Deus abençoe a todos@

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

eibon · Janeiro 17, 2009

Tópico movido

Origem: Programação » Plataforma Java » Java básico

Destino: Desenvolvimento » Javascript / DHTML

Entrar

Arquivado

Ocultar uma DIV quando outra é aberta

Recommended Posts

Jesus_Te_Ama! 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

eibon 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante