Ir para conteúdo

POWERED BY:

Arquivado

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

Micilini Roll

[Logica] Ocultar divs com javascript

Por , em Javascript

Recommended Posts

Micilini Roll    49

Micilini Roll
Postado

Pessoal eu tenho este comando aqui,que no caso faz apareçer uma div ,e caso ela estiver aberta,e clicarmos no link novamente ela se fecha! observem!

 

<!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" xml:lang="pt" lang="pt">
<head>
<title>Exibindo/oculta uma DIV</title>
<script type="text/javascript">
function exibe(id) {
	if(document.getElementById(id).style.display=="none") {
		document.getElementById(id).style.display = "inline";
	}
	else {
		document.getElementById(id).style.display = "none";
	}
}
</script>
</head>
<body>
<a href="#" onclick="javascript: exibe('conteudo');">conteudo_a</a>
<a href="#" onclick="javascript: exibe('conteudos');">conteudo_b</a><br />
<br />
<strong> se voce clicar pra exibir o conteudo A o conteudo B devera se fechar caso estiver aberto e virce-versa<strong>
<div id="conteudo" style="display: none;">
Eu nao posso apareçer junto a mensagem div conteudo_B
</div>
<br>
<div id="conteudos" style="display: none;">
Eu nao posso apareçer junto a mensagem div comteudo_A
</div>
</body>
</html>

 

 

 

se voce observou bem,voce ja sentiu mais ou menos aonde eu quero chegar,no caso se vc clicar no link com o nome de conteudo_a ele abre a div conteudo,agora se voce clicar no link do conteudo_b ele abre a div conteudos,mas! como dito no comando acima:

 

Eu nao posso apareçer junto a mensagem div comteudo_A

 

 

entao no caso se a div conteudo_a estiver aberta,a mesma devera se fechar e devera ficar somente aberta a div conteudo_b e virce versa! alguma luz??

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vinicius Rangel    208

Vinicius Rangel
Postado

na verdade o erro esta em nomes diferente para o que seria a mesma coisa, eles precisam ter uma classe em comum ai toda vez que clicar no elemento que possuir essa classe você fecha todas as janelas e depois abre a que você quiser.

 

 

 

$('.classeComum').click(function(){

var obj = $(this);
$('.classeComum').hide();
obj.show();
})

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vinicius Rangel    208

Vinicius Rangel
Postado 




<body>



<a href="#">conteudo_a</a><div class="conteudo" style="display: none;">



Eu nao posso apareçer junto a mensagem div conteudo_B



</div>



<a href="#">conteudo_b</a><div class="conteudo" style="display: none;">



Eu nao posso apareçer junto a mensagem div comteudo_A



</div><br />



<br />



<strong> se voce clicar pra exibir o conteudo A o conteudo B devera se fechar caso estiver aberto e virce-versa<strong>



<br>



</body>



</html>


 



$(function(){



$('a').live('click', function(){



var obj = $(this);



$('.conteudo').hide();



obj.next().show();



})



});


 



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
Micilini Roll
			  

	
		
	
			 49
	
		
	

		

		

			


	
		Micilini Roll
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

po,man testei seu comando e nao funcionou!,dei mais uma pesquizada na net e encontrei um comando,mais ele nao fazia o que eu queria,mais dei um observado no codigo e fiz umas coisas e funcionou do jeito que eu queria da uma olhada:


 


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){
 $('#conteudo').hide();
 $('#conteudos').hide();

 $('#mostrar').click(function(event){
 event.preventDefault();
 $("#conteudo").show("slow");
 $("#conteudos").hide("slow");
 });

 $('#ocultar').click(function(event){
 event.preventDefault();
 $("#conteudos").show("slow");
 $("#conteudo").hide("slow");
 });
 });

</script>

</head>

<body>

<p>
<a href="#" id="mostrar">mostrar conteudo_a</a> |
<a href="#" id="ocultar">mostrar conteudo_b</a>
</p>

<div id="conteudo" style="background-color:#09F; padding:5px; margin:0; width:300px;">
<h3>O conteúdo_a será exibido aqui</h3>

</div>
<div id="conteudos" style="background-color:#09F; padding:5px; margin:0; width:300px;">
<h3>O conteúdo_b será exibido aqui</h3>

</div>
<h2>Este conteúdo inicia-se visível e irá deslizar</h2>
</body>
</html>



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
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