Ir para conteúdo

POWERED BY:

Arquivado

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

André - Editor

Mostrando uma DIV e ao mesmo tempo escondendo outras...

Por , em Javascript

Recommended Posts

André - Editor    0

André - Editor
Postado

Tenho o seguinte código no meu site:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>..:: ENKORE :: RIO DE JANEIRO :: BRASIL ::..</title>

<script>
	 function camada( sId ) {
	   var sDiv = document.getElementById( sId );
	   if( sDiv.style.visibility == "hidden" ) {
		 sDiv.style.visibility = "visible";
	   } else {
		 sDiv.style.visibility = "hidden";
	   }
	 }
</SCRIPT>


<style type="text/css">

div.topo{
   top: 0px;
   left: 130px;
   width: 738px;
   height: 210px;
   position: absolute;
}

div.news{
   top: 210px;
   left: 130px;
   width: 563px;
   height: 381px;
   position: absolute;
}

div.about{
	top: 210px;
	left: 130px;
	width: 563px;
	height: 381px;
	position: absolute;
	visibility: hidden;
}

div.links{
	top: 210px;
	left: 130px;
	width: 563px;
	height: 381px;
	position: absolute;
	visibility: hidden;
}

div.contact{
	top: 210px;
	left: 130px;
	width: 563px;
	height: 381px;
	position: absolute;
	visibility: hidden;
}

div.menu{
   top: 210px;
   left: 692px;
   width: 176px;
   height: 381px;
   position: absolute;
}

</style></head>

<body>


<div class="topo" id="topo">
<img src="topo.jpg" border="0" alt="..:: ENKORE ::.." />
</div>

<div class="news" id="news">
<img src="news.jpg" border="0" alt="..:: Novidades ::.." />
</div>

<div class="about" id="about">
<img src="about.jpg" border="0" alt="..:: Sobre a Enkore ::.." />
</div>

<div class="links" id="links">
<img src="links.jpg" border="0" alt="..:: Link's ::.." />
</div>

<div class="contact" id="contact">
<img src="contact.jpg" border="0" alt="..:: Contato ::.." />
</div>

<div class="menu" id="menu">
<img src="menu.jpg" alt="..:: Menu ::.." border="0" usemap="#Map" />
<map name="Map" id="Map">
  <area shape="poly" coords="15,102,103,88,108,113,22,131" href="#" alt="..:: Novidades ::.." ONCLICK="camada('news');" />
<area shape="poly" coords="26,140,106,122,110,155,31,171" href="#" alt="..:: Sobre a Enkore ::.." ONCLICK="camada('about');" />
<area shape="poly" coords="32,187,110,174,116,205,41,219" href="#" alt="..:: Link's ::.." ONCLICK="camada('links');" />
<area shape="poly" coords="32,230,146,210,148,250,41,268" href="#" alt="..:: Contato ::.." ONCLICK="camada('contact');" />
</map>
</div>

</body>
</html>

 

 

 

Acontece que eu quero que quando ele MOSTRE a DIV About... ele ESCONDA TODAS AS OUTRAS... e quando ele mostre a determinada outra div, esconda as outras... deu pra entender???

 

 

No momento ele mostra uma, mas a que tava aberta anteriormente continua la (soh q por baixo)... logo se você esta em news, vai pra contatos e depois pra link, naum aparece a link pq a contatos naum fecha... :/

 

 

sem contar q se você estiver em news e clicar em news ele fica um branco... da hide na news...

 

 

colmo consertar isso?!

 

obrigado desde já.

Compartilhar este post

Link para o post
Compartilhar em outros sites

andreymor    0

andreymor
Postado

sua logica ta errada.

do jeito q ta, você só esconde ou mostra a especifica, passada pelo id.

ou seja, você mostra a q você clicou, mas nao esconde a q você ja tinha aberto, pq nao passou ela por id.

 

costumo usar jQuery. Uma "roda" já inventada e simples de usar.

dá uma olhada ai sobre ela. Ajuda bastante, e é de fácil entendimento.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Eduardo Penna    0

Eduardo Penna
Postado

Boa noite amigo.

 

Como disse o andrey, você está apenas trabalhando com uma div.

 

O jeito mais otimizado para fazer o que você quer é esconder todas as div e depois mostrar apenas a que foi passado no parâmetro da função.

 

Com relação ao jQuery, reparei que muitas pessoas aqui do fórum usam e utilizam ele. Eu particularmente não gosto dessas bibliotecas de funções prontas por 2 motivos:

 

- Elas impedem que os novatos aprendam a fundo javascript

- Na maioria dos casos, carregam o projeto onde são utilizadas de forma desnecessária. Lembre-se que javacript roda no client e se você tiver um .js de 43 kb, serão 43 kb a mais na sua aplicação ou web site.

 

O tempo que você perderia aprendendo a utilizar essa biblioteca, é melhor você investir em contruir a sua própria, mas vai de cada um.

 

Abraço

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