Ir para conteúdo

POWERED BY:

Arquivado

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

lukoBR

[Resolvido] Problemas com "Toggle DIV"

Por , em Javascript

Recommended Posts

lukoBR    0

lukoBR
Postado

Olá pessoal, olha eu denovo =D

 

Estou com um probleminha:

 

No desenvolvimento do meu projeto, estou querendo criar uma página com "menus" quando clico em uma imagem aparece uma div correspondente ao conteudo do menu. Até ai tudo bem, mas eu não consigo fazer exibir apenas uma div, e todas as outras ficarem ocultas. Espero uma mãozinha, desde já agradeço.

 

<!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>
<script language="javascript">
  function toggleDiv(divid){
    if(document.getElementById(divid).style.display == 'none'){
      document.getElementById(divid).style.display = 'block';
    }else{
      document.getElementById(divid).style.display = 'none';
    }
  }
</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<table width="45%" border="0" align="center">
  <tr>
    <td width="16%"><a href="#" onclick="toggleDiv('oculto')"><img src="http://static.wowhead.com/images/icons/large/inv_helmet_20.jpg" border="0" /></a></td>
    <td width="71%"><div id="oculto">
        ...CONTEÚDO...
</div></td>
    <td width="13%"> </td>
    <td width="13%"> </td>
  </tr>
  <tr>
    <td><a href="#" onclick="toggleDiv('oculto2')"><img src="http://static.wowhead.com/images/icons/large/inv_helmet_20.jpg" border="0" /></a></td>
    <td><div id="oculto2"> ...CONTEÚDO... </div></td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td><a href="#" onclick="toggleDiv('oculto3')"><img src="http://static.wowhead.com/images/icons/large/inv_helmet_20.jpg" border="0" /></a></td>
    <td><div id="oculto3"> ...CONTEÚDO... </div></td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td><a href="#head5"><img src="http://static.wowhead.com/images/icons/large/inv_helmet_20.jpg" border="0" /></a></td>
    <td><div id="oculto4"> ...CONTEÚDO... </div>      <br /></td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td><a href="#head5"><img src="http://static.wowhead.com/images/icons/large/inv_helmet_20.jpg" border="0" /></a></td>
    <td id="head5"></td>
    <td> </td>
    <td> </td>
  </tr>
</table>
</body>
</html>

OBS: As imagens do WoWHEAD estão ai para testar, pois ainda não fiz as de minha autoria ;)

Valeus =)

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Você vai precisar fazer um loop para percorrer todas as DIVS, ocultando elas.

E ai sim, você mostra a que foi clicada.

 

Tópico Movido:

PHP http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Javascript/DHTML

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

1º Atribuia uma classe a cada div.

 

2º Ao clicar, faça com que todas as divs com essa classe sejam escondidas...

 

3º Faça aparecer apenas a div clicada...

 

Tenta aí...

Compartilhar este post

Link para o post
Compartilhar em outros sites

lukoBR    0

lukoBR
Postado

1º Atribuia uma classe a cada div.

 

2º Ao clicar, faça com que todas as divs com essa classe sejam escondidas...

 

3º Faça aparecer apenas a div clicada...

 

Tenta aí...

 

Desculpe minha santa ignorância, mas não manjo javascript =D

 

O negócio é +- assim:

- cada div com sua classe? Ex div1 -> classdiv1; div2 -> classdiv2 dai ao clicar uso o javascript para fechar divs comm classe "classdiv1 e 2" e mostro a classdiv3?

 

Podes me ajudar no código? Agradecido ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Não... as divs devem ter a mesma classe, os ID's que devem ser diferentes...

 

Esboço:

var menu = document.getElementById("main_menu");
var links = menu.getElementsByTagName("a");
 var todas_divs = document.getElementysByTagName("div");

var divs_menu = new Array();

var n = 0;
for(var i = 0; i < todas_divs.length; i++){
 if(divs[i].className == "div_menu"){
 divs_menu[n++] = divs[i];
 }
}

for(i = 0; i < links.length; i++){
 links[i].onclick = function(){
 for(n = 0; n < divs_menu.length; n++){
 divs_menu[n].style.display = "none";
 }
 }
 divs_menu[i].style.display = "block";
}

HTML:

<ul id="main_menu">
<li><a href="#">Link 1</a>
 <div class='div_menu'>
</li>
<li><a href="#">Link 2</a>
 <div class='div_menu'>
</li>
<li><a href="#">Link 3</a>
 <div class='div_menu'>
 </li>
</ul>

Não testei, mas deve funcionar...

Compartilhar este post

Link para o post
Compartilhar em outros sites

lukoBR    0

lukoBR
Postado

Acabei de testar, não pegou. Creio que no HTML não existe a div que contenha o conteudo a ser exibido. Mas agradeço. Espero resposta.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

O conteúdo não existe?

 

Então teria que ficar criando e apagando com JS, o que dá muito trabalho...

 

Crie os elementos e bote um display: none; no CSS...

 

Isso é só um esboço, tente adaptar para o seu caso

Esboço:

var menu = document.getElementById("main_menu");
var links = menu.getElementsByTagName("a");
 var todas_divs = document.getElementysByTagName("div");

var divs_menu = new Array();

var n = 0;
for(var i = 0; i < todas_divs.length; i++){
 if(divs[i].className == "div_menu"){
 divs_menu[n++] = divs[i];
 }
}

for(i = 0; i < links.length; i++){
 links[i].onclick = function(){
 for(n = 0; n < divs_menu.length; n++){
 divs_menu[n].style.display = "none";
 }
 }
 var rel = this.getAttribute("rel");
 var num = parseFloat(rel.substr(4, 1) - 1);
 divs_menu[num].style.display = "block";
}

HTML:

<ul id="main_menu">
<li><a href="#" rel='link1'>Link 1</a>
 <div class='div_menu'>
</li>
<li><a href="#" rel='link2'>Link 2</a>
 <div class='div_menu'>
</li>
<li><a href="#" rel='link3'>Link 3</a>
 <div class='div_menu'>
 </li>
</ul>

Compartilhar este post

Link para o post
Compartilhar em outros sites

lukoBR    0

lukoBR
Postado

Encontrei algo muito interessante que resolveu o meu problema:

Spry Tabbed Panels do Dreamweaver CS4 =D

 

Mesmo assim, agradeço por tentar me ajudar, valeus.

Adorei ;)

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