Ir para conteúdo

POWERED BY:

Arquivado

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

Alexandre Di Salvo

Ocultar e mostrar div com jQuery?

Por , em Javascript

Recommended Posts

EuToComProblema!    1

EuToComProblema!
Postado

com jquery eu sei.

 

$('#minhaDiv').slideUp(); //esconde

$('#minhaDiv').slideDown(); //mostra

 

ou

 

$('#minhaDiv').css('visibility','hidden'); //esconde

$('#minhaDiv').css('visibility','visible');//mostra

 

provavelmente existem outras formas mas sei assim

Compartilhar este post

Link para o post
Compartilhar em outros sites

Alexandre Di Salvo    0

Alexandre Di Salvo
Postado

com jquery eu sei.

 

$('#minhaDiv').slideUp(); //esconde

$('#minhaDiv').slideDown(); //mostra

 

ou

 

$('#minhaDiv').css('visibility','hidden'); //esconde

$('#minhaDiv').css('visibility','visible');//mostra

 

provavelmente existem outras formas mas sei assim

 

Não teria algum evento vinculado ao click por exemplo?

Compartilhar este post

Link para o post
Compartilhar em outros sites

EuToComProblema!    1

EuToComProblema!
Postado

cria uma funcao javascript

 

function mostra_oculta_div() {

}

 

 

aí no html onde você cria o input coloca onclick, onchange... etc

 

pesquisa por js events acho q jah encontra bastante coisa.

 

<input ..... onclick='mostra_oculta_div()' />

 

acho q com isso tu consegue se virar. qualquer coisa posta de novo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

sem jQuery

<html>
<head>
<script type="text/javascript">
function id( el ){
	return document.getElementById( el );
}
function mostra( el ){
	id( el ).style.display = 'block';
}
function esconde_todos( el, tagName ){
	var tags = el.getElementsByTagName( tagName );
	for( var i=0; i<tags.length; i++ )
	{
		tags[i].style.display = 'none';
	}
}
window.onload = function()
{
	id('Masculino').style.display = 'none';
	id('Feminino').style.display = 'none';
	
	id('sel-sexo').onchange = function()
	{
		esconde_todos( id('palco'), 'div' ); 
		mostra( this.value );
	}
	var radios = document.getElementsByTagName('input');
	for( var i=0; i<radios.length; i++ ){
		if( radios[i].type=='radio' )
		{
			radios[i].onclick = function(){
				esconde_todos( id('palco'), 'div' );
				mostra( this.value );
			}
		}
	}
}
</script>
</head>
<body>
	
	<select name="sel-sexo" id="sel-sexo">
		<option value="">--</option>
		<option value="Feminino">Feminino</option>
		<option value="Masculino">Masculino</option>
	</select>
	<label><input type="radio" name="rd-sexo" value="Feminino" />Feminino</label>
	<label><input type="radio" name="rd-sexo" value="Masculino" />Masculino</label>
	
	<div id="palco">
		<div id="Masculino">Seu sexo é Masculino!</div>
		<div id="Feminino">Seu sexo é Feminino!</div>
	</div>
</body>
</html>

com jQuery:

<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#palco > div").hide();
	$("#sel-sexo").change(function(){
		$("#palco > div").hide();
		$( '#'+$( this ).val() ).show('fast');
	});
	$("input[name='rd-sexo']").click(function(){
		$("#palco > div").hide();
		$( '#'+$( this ).val() ).show('fast');	
	});
});
</script>
</head>
<body>
	
	<select name="sel-sexo" id="sel-sexo">
		<option value="">--</option>
		<option value="Feminino">Feminino</option>
		<option value="Masculino">Masculino</option>
	</select>
	<label><input type="radio" name="rd-sexo" value="Feminino" />Feminino</label>
	<label><input type="radio" name="rd-sexo" value="Masculino" />Masculino</label>
	
	<div id="palco">
		<div id="Masculino">Seu sexo é Masculino!</div>
		<div id="Feminino">Seu sexo é Feminino!</div>
	</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

feramal    0

feramal
Postado

Muito obrigado pelo código!

E como eu faria se eu quisesse que a opção radio Feminino por ex já abrisse a página com ela aparecendo? além de estar com checked="checked"

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

pensa um pouquinho ^_^

 

com jQuey, seria mais ou menos assim:

$(document).ready(function(){
	$("#palco > div").hide();
	$("#Feminino").show();//mostrando o conteudo da Feminino
	$("input[value='Feminino']").attr({checked: 'checked'});//marcando checked no radio Feminino
	$("#sel-sexo").change(function(){
		$("#palco > div").hide();
		$( '#'+$( this ).val() ).show('fast');
	});
	$("input[name='rd-sexo']").click(function(){
		$("#palco > div").hide();
		$( '#'+$( this ).val() ).show('fast');
	});
});

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