Ir para conteúdo

POWERED BY:

Arquivado

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

Owner

[Resolvido]  evento onClick

Por , em Desenvolvimento frontend

Recommended Posts

Owner    0

Owner
Postado

Olá galera, estou fazendo uma listagem de um banco de dados, no caso são capas de cds com as informações embaixo. Gostaria de saber como usar o evento onClick para quando eu clicar no CD 1 mostrar as outras informações e quando eu clicar em outro CD mostrar as informações desse e ocultar a do CD1.

 

Código:

<script type="text/javascript">

 

function bloqueio()

{

if (document.getElementById("maisinfo").style.display == "none")

{

document.getElementById("maisinfo").style.display = "block";

}

else

{

document.getElementById("maisinfo").style.display = "none";

}

}

 

</script>

<span onClick="bloqueio()">+ info</span>

<div id="maisinfo" align="center" style="width:auto; height:auto; display: none">

OUTRAS INFORMAÇÕES

</div>

No caso ao exibir os resultados todas as divs ficam com o mesmo id e isso só faz com que funcione com o primeiro resultado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carlos Designer    0

Carlos Designer
Postado

Owner certa vez fiz um script que se encaixa nas suas necessidades.

Basicamente existe um container onde estão um span e uma div logo abaixo, e toda vez que um span for clicado a div de baixo se expande.

 

O script é limpo e sem marcação extra:

 

Preview:

http://www.carlosroberto.hbe.com.br/im/dro...euDropDown.html

 

<!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>Script</title>
<style type="text/css">
#discos span{
margin-top:5px;
color:#CC3333;
display:block;
cursor:pointer;
}
#discos div{
display:none;
margin-bottom:20px;
}
#discos div p{
margin:2px 0 2px 0;
}
</style>

<script type="text/javascript">
/*@autor:CARLOS DESIGNER*/
window.onload = function ()
{
container = document.getElementById('discos');//este é o elemento que contem todos os outros
span = container.getElementsByTagName('span');
	for(i=0; i<span.length; i++)
	{
	meuspan = span[i];
	/*a parte abaixo diz que quando for clicado em qualquer
	  elemento span todas as divs dentro da div container 
	  serão escondidas e sera mostrada apenas a div que é
	  irmã do elemento span clicado*/
	meuspan.onclick = function()
		{
		all_divs = container.getElementsByTagName('div');
			for(j=0; j<all_divs.length; j++)
			{
			all_divs[j].style.display = 'none';
			}
			this.nextSibling.nextSibling.style.display = 'block';
		}
	}
}
</script>
</head>

<body>
<div id="discos">

<span>Informação CD1</span>
<div>
<p>A informação  do cd 1 extra vem escrita aqui</p>
<p>A informação extra vem escrita aqui</p>
</div>

<span>Informação CD2</span>
<div>
<p>Texto do CD2</p>
<p>Algum texto qualquer</p>
</div>

<span>Informação CD3</span>
<div>
<p>Este é o cd3</p>
<p>Falando do cd3...</p>
</div>

<span>Informação CD4</span>
<div>
<p>Alguma coisa do cd4</p>
<p>O cd 4...</p>
</div>

</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Paschoalin    0

Thiago Paschoalin
Postado

Olha Owner, não testei, mas acho que se você fizer uma pequena alteração em seu código, terá o resultado:

 

<script type="text/javascript">

function bloqueio(id){
var Procurar = document.getElementById(id);
   if (Procurar.style.display == "none"){
   Procurar.style.display = "block";
   }else{
   Procurar.style.display = "none"; 
   } 
}
</script>

Depois no seu link:

// Opção 01 - Usando SPAN:
<span onClick="bloqueio('maisinfo01')">+ info 01</span>
<span onClick="bloqueio('maisinfo02')">+ info 02</span>

//Opção 02 - Usando A HREF:
<a href="java script:bloqueio('maisinfo01');">+ info 01</a>
<a href="java script:bloqueio('maisinfo02');">+ info 02</a>

........

<div id="maisinfo01" align="center" style="width:auto; height:auto; display: none">
OUTRAS INFORMAÇÕES
</div>

<div id="maisinfo02" align="center" style="width:auto; height:auto; display: none">
OUTRAS INFORMAÇÕES
</div>

Verifica isso, e conta o resultado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Paschoalin    0

Thiago Paschoalin
Postado

Eu e o carlos te demos as duas opções... agora fica a seu critério a que vai mais ajudar no seu caso:

 

No meu o link abre e fecha cada DIV separadamente, na do Carlos quando abre uma, fecha a outra, o mesmo resultados mostrados de 2 formas diferentes ^^.

 

 

Link para preview: www.tgpsolucoes.com/Ajuda/teste.htm

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito