[Resolvido] Link que exibe DIV sem carregar página

[pcastilho 0]

Estou tentando fazer um menu onde as informações apareçam sem a necessidade de recarregar a página. Encontrei este código em um site que resolve parte do meu problema.

 

Este é o código no head:

<script>
 function toggle(obj) {
   var el = document.getElementById(obj);
   if ( el.style.display != 'none' ) {
     el.style.display = 'none';
   }
   else {
     el.style.display = '';
   }
 }
</script>

 

Este é o código no menu:

<a href="#" onclick="toggle('conteudo');">

 

Ao clicar no link, a DIV será aberta:

<div id="conteudo" style="display:none">Conteúdo</div>

 

O problema é, ao clicar em um novo link, o conteúdo do link anterior permanece na página. Assim, é preciso clicar uma vez para exibir o conteúdo, e clicar novamente para o conteúdo ser fechado.

 

É possível fazer com que ao clicar em outro link, a DIV que foi exibida com o link anterior seja fechada?

 

Espero que alguém possa ajudar..

[berkowitz 2]

Fala pcastilho! Beleza?

 

Uma forma simples de resolver essa questão é atribuir um CLASS para os elementos DIV de menu. Aí no click para abrir determinado item você esconde todos os outros que possuem tal CLASS, entendeu?

 

Cria um outro método chamado CLEAN (por exemplo) e aplica o display=none para todos os elementos cuja propriedade CLASS seja um determinado valor. Aí você chama esse método dentro do seu método toggle antes de tudo.

 

Ah! Para pegar todos os elementos que possuam um determinado CLASS utilize o comando document.getElementsByClassName.

 

Abs!

[William Bruno 1501]

esse é o principio de um menu em abas.

 

leia:

http://wbruno.com.br/2011/03/12/principio-de-menu-em-abas/

[pcastilho 0]

Obrigado pela ajuda berkowitz!

 

Você poderia me ajudar com o código? É que de Javascript eu não entendo quase nada..

Valeu pela ajuda!

 

Fala pcastilho! Beleza?

 

Uma forma simples de resolver essa questão é atribuir um CLASS para os elementos DIV de menu. Aí no click para abrir determinado item você esconde todos os outros que possuem tal CLASS, entendeu?

 

Cria um outro método chamado CLEAN (por exemplo) e aplica o display=none para todos os elementos cuja propriedade CLASS seja um determinado valor. Aí você chama esse método dentro do seu método toggle antes de tudo.

 

Ah! Para pegar todos os elementos que possuam um determinado CLASS utilize o comando document.getElementsByClassName.

 

Abs!

[berkowitz 2]

Seria uma coisa mais ou menos assim:

 

function clean(cssClass)
{
   var divs = document.getElementsByClassName(cssClass),i=0;

   for(;i<divs.length;i++)
   {
       divs[i].style.display='none';
   }
}

 

Aí você acrescenta a chamada desse método lá no teu método toggle antes de qualquer coisa. Assim:

function toggle(obj)
{
   clean('conteudo');
....
}

 

E para finalizar troca suas divs. Com esses métodos todas elas deverão possuir o atributo CLASS com o valor conteudo, e cada uma com um id específico.

Ex:

<div class="conteudo" id="c1" style="display:none">Conteúdo 1</div>

 

Entendeu?

Aí quando você clicar em um determinado link pedindo para abrir o conteúdo c1 por exemplo (toggle('c1')) ele vai primeiro fechar todas as outras para em seguida aplicar as configurações para o objeto que você pediu.

 

Abs!

[pcastilho 0]

Cara, valeu mesmo!

Muito obrigado, resolveu o problema..

[berkowitz 2]

Maravilha!

Mas o mais importante: compreendeu?

 

Abs!

[pcastilho 0]

Entendi sim, preciso tirar uns dias pra estudar javascript mais a fundo, estou precisando muito no trabalho..

 

Gostaria de saber se tem como colocar efeito nesse script, pois a página está muito "dura". Ao clicar em um link após a rolagem da página, ela volta para o topo e exibe a div escondida, então queria que a div aparecesse de uma forma mais suave..

 

Agradeço a atenção.