Ir para conteúdo

Arquivado

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

Public2004

[Resolvido] Mostrar DIV e ocultar outras que estão visíveis

Por , em Javascript

Recommended Posts

Public2004    79

Public2004
Postado

Bom dia,

 

Tenho um script simples para mostrar e ocultar DIVs, mas quero que após uma DIV aberta, se clicar em outro botão para mostrar outra DIV, ocultar a que está aberta antes de mostrar a nova DIV, teria como adaptar algo nesse script, ou alguém tem alguma outra sugestão.

function mostra(item1){
	var item1 = document.getElementById(item1);
	if (item1.style.display=='none'){
		item1.style.display='';
	}else{
		item1.style.display='none';
	}
}

Vlw.

Compartilhar este post

Link para o post
Compartilhar em outros sites

webmind    5

webmind
Postado

nao sei se era isto mas se nao for explique melhor o que pretende

 

<!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>
function oculta(base, final){
ocultar=document.getElementById(base);
mostrar=document.getElementById(final);
ocultar.style.display="none";
mostrar.style.display="";

}
</script>
</head>

<body>
<div id="div1" style="width:350px; padding:5; background-color:#000033; color:#FFFFFF">conteudo 1</div>
<div id="div2" style="display:none; width:350px; padding:5; background-color:#990000; color:#FFFFFF">conteudo 2</div>
<a href="java script:oculta('div1','div2')">mostrar div2</a>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Public2004    79

Public2004
Postado

Vlw, no seu ex. com duas DIVs fica beleza..., mas eu tenho várias DIVs.

Eu tenho várias imagens, sendo que cada uma delas é um link para mostrar uma DIV, e quando clicar em uma delas, mostra o conteúdo da respectiva DIV, só que ao clicar em outra imagem, o conteúdo anterior deverá ser ocultado para mostrar a nova DIV no mesmo lugar - Como são apenas pequenos textos em cada DIV, resolvi fazer dessa forma, veja o que consegui utilizando um array:

function mostra(theId){
	var theArray= new Array('item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8');
	for(i=0; i<theArray.length; i++){
		if(theArray[i] == theId){
			document.getElementById(theId).style.display='block';
		}else{
			document.getElementById(theArray[i]).style.display='none';
		}
	}
}

Agora, teria como ao clicar na mesma imagem, a DIV referente a esta ser ocultada? Ex, clica: aparece, clica de novo, desaparece.

 

Abs.

Compartilhar este post

Link para o post
Compartilhar em outros sites

webmind    5

webmind
Postado

o CLK e para contar os clicks se for o primeiro click mostra o theId senao esconde e coloca o contador no inicio

 

 

<!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>
var clk=0;

function mostra(theId){


	var theArray= new Array('item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8');
if(clk==0){
 for(i=0; i<theArray.length; i++){
		if(theArray[i] == theId){
			document.getElementById(theId).style.display='block';
		}else{
			document.getElementById(theArray[i]).style.display='none';
		}
	}
clk++;
}//if

else if(clk==1)
{
document.getElementById(theId).style.display="none";
clk=0;
}
}//fim

</script>
</head>

<body>
<input type="button"  onclick="java script:mostra('item1')" value="mostra">
<div id="item1">item1</div>
<div id="item2">item2</div>
<div id="item3">item3</div>
<div id="item4">item4</div>
<div id="item5">item5</div>
<div id="item6">item6</div>
<div id="item7">item7</div>
<div id="item8">item8</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Public2004    79

Public2004
Postado

Obrigado amigo pela ajuda...

Quando clico, aparece, clico de novo no mesmo item, desaparece, massssss, quando clico em um item, e na sequência clico em outro item, preciso clicar 2x para aparecer a outra DIV, veja como fiz:

<!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>
var clk=0;
function mostra(theId){
	var theArray= new Array('item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8');
	if(clk==0){
		for(i=0; i<theArray.length; i++){
			if(theArray[i] == theId){
				document.getElementById(theId).style.display='block';
			}else{
				document.getElementById(theArray[i]).style.display='none';
			}
		}
		clk++;
	}else if(clk==1){
		document.getElementById(theId).style.display="none";
		clk=0;
	}
}
</script>
</head>
<body>
<a onclick="mostra('item1');" style="cursor: hand;">link 1</a><br />
<a onclick="mostra('item2');" style="cursor: hand;">link 2</a><br />
<a onclick="mostra('item3');" style="cursor: hand;">link 3</a><br />
<a onclick="mostra('item4');" style="cursor: hand;">link 4</a><br />
<a onclick="mostra('item5');" style="cursor: hand;">link 5</a><br />
<a onclick="mostra('item6');" style="cursor: hand;">link 6</a><br />
<a onclick="mostra('item7');" style="cursor: hand;">link 7</a><br />
<a onclick="mostra('item8');" style="cursor: hand;">link 8</a><br />

<br /><br />

<div id="item1" style="display:none;">Content div 1</div>
<div id="item2" style="display:none;">Content div 2</div>
<div id="item3" style="display:none;">Content div 3</div>
<div id="item4" style="display:none;">Content div 4</div>
<div id="item5" style="display:none;">Content div 5</div>
<div id="item6" style="display:none;">Content div 6</div>
<div id="item7" style="display:none;">Content div 7</div>
<div id="item8" style="display:none;">Content div 8</div>
</body>
</html>

Abs.

Compartilhar este post

Link para o post
Compartilhar em outros sites

webmind    5

webmind
Postado

a bocado fiz o script pelo lado mais ilogico, mas agora os neuronios acordaram rsrsrs

 

 

<!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>
function mostra(theId){
var theArray= new Array('item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8');
w=document.getElementById(theId)
if(w.style.display=="block"){w.style.display='none';}else{ 

 
 
	   for(i=0; i<theArray.length; i++){
			if(theArray[i] == theId){
				w.style.display='block';
			}else{
				document.getElementById(theArray[i]).style.display='none';
			}
	  }
	  }
	  
}
</script>
</head>
<body>
<a onclick="mostra('item1');" style="cursor: hand;">link 1</a><br />
<a onclick="mostra('item2');" style="cursor: hand;">link 2</a><br />
<a onclick="mostra('item3');" style="cursor: hand;">link 3</a><br />
<a onclick="mostra('item4');" style="cursor: hand;">link 4</a><br />
<a onclick="mostra('item5');" style="cursor: hand;">link 5</a><br />
<a onclick="mostra('item6');" style="cursor: hand;">link 6</a><br />
<a onclick="mostra('item7');" style="cursor: hand;">link 7</a><br />
<a onclick="mostra('item8');" style="cursor: hand;">link 8</a><br />

<br /><br />

<div id="item1" style="display:none;">Content div 1</div>
<div id="item2" style="display:none;">Content div 2</div>
<div id="item3" style="display:none;">Content div 3</div>
<div id="item4" style="display:none;">Content div 4</div>
<div id="item5" style="display:none;">Content div 5</div>
<div id="item6" style="display:none;">Content div 6</div>
<div id="item7" style="display:none;">Content div 7</div>
<div id="item8" style="display:none;">Content div 8</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

ddelucca    0

ddelucca
Postado

e se o conteúdo for dinâmico (php): como trabalhar essa parte

 

 

<script> function mostra(theId){ var theArray= new Array('item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8'); w=document.getElementById(theId) if(w.style.display=="block"){w.style.display='none';}else{ for(i=0; i<theArray.length; i++){ if(theArray[i] == theId){ w.style.display='block'; }else{ document.getElementById(theArray[i]).style.display='none'; } } } } </script>

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