Ir para conteúdo

POWERED BY:

Arquivado

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

amanda12

[Resolvido] Erro em div oculta

Recommended Posts

Pessoal tenho um script que faz a div ficar oculta e após clicar sobre o texto ela aparece com o conteúdo. Pois bem o problema é que quando eu clico no link dois eu precisava que a div 1 desaparecesse e somente a dois ficasse ativa e vice versa. vejam o codigo.

 

<!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>Untitled Document</title>
<script language="JavaScript" type="text/javascript">

function showHide (ID) { 
if (document.getElementById(ID).style.display == "none") {   
document.getElementById(ID).style.display= ""; 
} else {   
document.getElementById(ID).style.display = "none"; 
}
}
</script>
</head>
<body>
<a onclick="showHide('Artistic');" style="cursor: pointer;">div1</a><br />
<a onclick="showHide('Artistic2');" style="cursor: pointer;">div2</a><br />
<div id="Artistic" style="display: none; padding-top: 5px; padding-bottom: 5px; padding-left: 20px;">Texto</div>
<div id="Artistic2" style="display: none; padding-top: 5px; padding-bottom: 5px; padding-left: 20px;">Texto2</div>
</body>
</html>

O que eu posso colocar aqui pra quando uma div aparecer ela fechar a outra?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá..

 

eu tenho um código que faz a mesma.. de uma olhadinha ai..

 

<!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>Untitled Document</title>
<script type="text/javascript">
function mostra(atual){
	if(document.getElementById('linha'+atual).style.display=='block') {
		document.getElementById('linha'+atual).style.display='none';
	var max = 2; // numero de linhas que você quer mostrar/escondervar
	i=1;
	while(i<=max){
		document.getElementById('linha'+i).style.display='none';
		i++;
	}
	}
	else {
	var max = 2; // numero de linhas que você quer mostrar/escondervar
	i=1;
	while(i<=max){
		document.getElementById('linha'+i).style.display='none';
		i++;
		}
	document.getElementById('linha'+atual).style.display='block';
	}

}
</script>
</head>
<body>
<a onClick="mostra(1);" style="cursor: pointer;">div1</a><br />
<a onClick="mostra(2);" style="cursor: pointer;">div2</a><br />
<div id="linha1" style="display:none; padding-top: 5px; padding-bottom: 5px; padding-left: 20px;">Texto</div>
<div id="linha2" style="display:none; padding-top: 5px; padding-bottom: 5px; padding-left: 20px;">Texto2</div>
</body>
</html>

PS: se essa não resolver.. ai de um olhadinha no fórum de JavaScript / DHTML

[]'s

Compartilhar este post


Link para o post
Compartilhar em outros sites

Isso é Javascript.

<script language="JavaScript" type="text/javascript">

function showHide(mostrar, esconder) { 
	var mostrar = document.getElementById(mostrar);
	var esconder = document.getElementById(esconder);
	if (mostrar.style.display == "none") {   
		mostrar.style.display= "block"; 
		esconder.style.display = 'none';
	} 
}
</script>
</head>
<body>
	<a onclick="showHide('Artistic','Artistic2');" style="cursor: pointer;">div1</a><br />
	<a onclick="showHide('Artistic2','Artistic');" style="cursor: pointer;">div2</a><br />
	<div id="Artistic" style="display: none; padding-top: 5px; padding-bottom: 5px; padding-left: 20px;">Texto</div>
	<div id="Artistic2" style="display: none; padding-top: 5px; padding-bottom: 5px; padding-left: 20px;">Texto2</div>
</body>
</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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