Ir para conteúdo

POWERED BY:

Arquivado

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

rodolfo v.

Função para abrir conteúdo em display = none;

Por , em Javascript

Recommended Posts

rodolfo v.    0

rodolfo v.
Postado

Bom dia...

 

Seguindo a função:

<script>
function aparece(ahhhh){
if(document.getElementById(ahhhh).style.display== "none"){
document.getElementById(ahhhh).style.display = "block";
}
else {
document.getElementById(ahhhh).style.display = "none"
}
}
</script>

É criado um link para chamar a função ao clicar e abrir o conteúdo, e se clicado novamente o conteúdo some...

Só que estou trabalhando com vários links (6 no total) e quando clico em 2, os 2 conteúdos ficam..

 

Gostaria que ao clicar em um, todos os outros voltassem pro None, e só aparecesse o clicado... e vice-versa..

 

 

Agradeço desde já!

 

Att. Rodolfo Valezin

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

mesmo esquema do accordion, veja:

http://forum.imasters.com.br/index.php?/topic/409710-menu-accordion-aberto-apos-link/

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

cara, certamente 'mais simples' não será.. pq oque você quer, não é 'tão simples'.

mas vou explicar a lógica para fazer então.

 

-> para pegar um array, use getElementsByTagName('a')

-> faça um loop pelos elementos desse array que vão disparar a ação de abrir (vamos usar a tag <a>)

-> para limitar a quais aplicar a função, vamos pegar o getElementsByTagName() apartir de um container

-> antes de 'exibir', ao clicar em algum dos <a>, esconda todos os conteudos, e depois disso, mostre oque você clicou.

-> ao carregar a página, esconda todos os conteudos

 

exemplo sem jquery de accordion:

http://forum.imasters.com.br/index.php?/topic/354140-repente-css-menus/page__view__findpost__p__1551294

Compartilhar este post

Link para o post
Compartilhar em outros sites

rodolfo v.    0

rodolfo v.
Postado

Hm... entendi como funciona, só não consegui adaptar ao meu caso...

Por exemplo, no menu é utilizado as UL's como "submenus"...

 

No meu caso não são Sub-menus... e sim o conteúdo... que ficam em uma div...

 

Atual script:

<script>
function aparece(Genari){
if(document.getElementById(Genari).style.display== "none"){
document.getElementById(Genari).style.display = "block";
}
else {
document.getElementById(Genari).style.display = "none"
}
}
</script>

o link que chama o conteúdo: (isso fica dentro de uma div com bg e etc..)

<a href="#" onclick="aparece('Historia');">História da Genari</a> <a name="link1"></a>

div conteúdo, após clicar no link o conteúdo aparece aqui...

<div style="float:left; margin-left:15px; height:400px;">

<span id="Historia" style="display: none;">
História da Genari
</span>

</div>

então, atualmente são 6 links...

~

 

Não consegui adaptar ao meu caso :S pois sou leigo na área de js...

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

cara.. exemplo:

 

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function id( el ){
	return document.getElementById( el );
}
function hide_all(){
	var divs = id('content').getElementsByTagName('div');
	for( var i=0; i<divs.length; i++ )
	{
		divs[i].style.display = 'none';
	}
}
/* http://www.javascriptkit.com/jsref/event.shtml */
function disablelink( e ){
	var evt = window.event || e
	if (evt.preventDefault) //supports preventDefault?
		evt.preventDefault()
	else //IE browser
		return false
}
window.onload = function(){
	hide_all();
	var as = id('content').getElementsByTagName('a');
	for( var i=0; i<as.length; i++ )
	{
		as[i].onclick = function( e ){
			hide_all();
			var id_el = this.href.split('#')
			
			id( id_el[1] ).style.display = 'block';			
			return disablelink( e );
		}
	}
}
</script>
</head>
<body>
	<div id="content">
		<a href="#historia">História</a><br />
		<div id="historia">Conteudo da História</div>
		
		<a href="#geografia">Geografia</a><br />
		<div id="geografia">Conteudo da Geografia</div>
		
		<a href="#matematica">Matemática</a><br />
		<div id="matematica">Conteudo da Matemática</div>

	</div><!-- /content -->
</body>
</html>

eu também 'era/ja fui mais leigo'. Estude, leia, tente, tente de novo, pesquise...

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