(Resolvido) esconder/mostrar div usando seletor

gean G. Carneiro · Abril 24, 2009

boa tarde,

tenho uma duvida.

imagine a seguite situação:

existe e um seletor 2 DIVs:div A e div B.Onde a div B esta escodido e o seletor contem o "item 01" e "item 02".

ao selecionar o "item 02" a div A desaparese e entra no lugar a div B, e ao contrario ocorre ao selecionar o "item 01".

é essa a minha duvida como fazer isto?

.Andreia. · Abril 24, 2009

você tem que trabalhar com o display das divs:

document.nome_da_div.style.display = 'none'; //esconde
document.nome_da_div.style.display = 'block'; //exibe

gean G. Carneiro · Abril 24, 2009

e oque eu coloco no javascript para inserir estes codigos?content fuction?

UBiratã · Abril 24, 2009

Boa Tarde, tenho tbém algumas duvidas com relação a esta QUESTÃO, é o seguinte tenho um form de adesão, quando chega na parte da forma de pagto o usuario escolhe entre 03 formas, na forma A e na forma B eu tenho que exibir um conteudo, na forma C ele tem que preenche um cadastramento adicional sendo enviado junto com o restante do FORM, o que quero, alternar entre essas 3 DIVs, estou ainda iniciando no AJAX.

Editado Abril 27, 2009 por .Andreia.

gean G. Carneiro · Abril 25, 2009

consegui resolver parte do problema,ai esta o codigo:

<%@ page contentType="text/html; charset=iso-8859-1" language="java" import="java.sql.*" errorPage="" %>
<!-- inicio da página -->
<!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=iso-8859-1" />
<title>Mostra e esconde divs</title>
<script type="text/javascript">

function mostradiv(div){
    document.getElementById(div).style.display = 'block';
}

function ocutardiv(div){
    document.getElementById(div).style.display = 'none';
}


</script>
</head>
<body>
<form action="teste.html" method="post">
<select onchange="mostradiv(this.value);ocutardiv(?)" name="sele&ccedil;&atilde;o" size="1">
<option value="teste">+ AQUI FICA O TITULO INICIAL</option>
<option value="teste2">- AQUI FICA O TITULO APOS O CLICK DO MOUSE</option>
</select>
</form>
<br>
<div id="teste" style="display:none;">
<form action="teste.html" method="post">
<select name="sele&ccedil;&atilde;o" size="1">
<option>item 01</option>
<option>item 02</option>
<option>item 03</option>
</select>
</form>
</div>
<br />
<div id="teste2" style="display:none;">
<form action="teste.html" method="post">
<select name="teste" size="1">
<option>item 01</option>
<option>item 02</option>
</select>
</form>
</div>

</body>
</html>

agora eu quero que quando o item 1(+ AQUI FICA O TITULO INICIAL) for selecionado a div "teste2" fique oculta,e

quado o item 2(- AQUI FICA O TITULO APOS O CLICK DO MOUSE) for selecionado a div "teste" fique oculta.o que poso colocar no lugar do "?"

Editado Abril 25, 2009 por gean G. Carneiro

.Andreia. · Abril 27, 2009

espero que com este exemplo solucione a duvida de ambos:

<!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=iso-8859-1" />
<title>Mostra e esconde divs</title>
<script type="text/javascript">

function mostradiv(div){
    document.getElementById(div).style.display = 'block';
}

function ocutardiv(div){
    document.getElementById(div).style.display = 'none';
}


</script>
</head>
<body>
<form action="teste.html" method="post">
<select onchange="mostradiv(this.value);ocutardiv(?)" name="sele&ccedil;&atilde;o" size="1">
<option value="teste">+ AQUI FICA O TITULO INICIAL</option>
<option value="teste2">- AQUI FICA O TITULO APOS O CLICK DO MOUSE</option>
</select>
</form>
<br>
<div id="teste" style="display:none;">
<form action="teste.html" method="post">
<select name="sele&ccedil;&atilde;o" size="1">
<option>item 01</option>
<option>item 02</option>
<option>item 03</option>
</select>
</form>
</div>
<br />
<div id="teste2" style="display:none;">
<form action="teste.html" method="post">
<select name="teste" size="1">
<option>item 01</option>
<option>item 02</option>
</select>
</form>
</div>

</body>
</html>

gean G. Carneiro · Abril 29, 2009

ho! eu tirei a minha duvida com meu irmão em relação a isto e ele disse que o:

document.getElementById(div).style.display = 'block';

e o

document.getElementById(div).style.display = 'none';

devem estar no mesmo function e eu tentei isto, mas o firefox "acusou" 2 erros: a seguir o codigo:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Mostra e esconde divs</title>
<script type="text/javascript">

function mostradiv(div){

	if(div){
		document.getElementById(div).style.display = 'block';
	}

	else(div){
		document.getElementById(div).style.display = 'none';
	}

}



</script>
</head>
<body>
<form action="teste.html" method="post">
<select onchange="mostradiv(this.value)" name="sele&ccedil;&atilde;o" size="1">
<option value="teste">+ AQUI FICA O TITULO INICIAL</option>
<option value="teste2">- AQUI FICA O TITULO APOS O CLICK DO MOUSE</option>
</select>
</form>
<br>
<div id="teste" style="display:none;">
<form action="teste.html" method="post">
<select name="sele&ccedil;&atilde;o" size="1">
<option>item 01</option>
<option>item 02</option>
<option>item 03</option>
</select>
</form>
</div>
<br />
<div id="teste2" style="display:none;">
<form action="teste.html" method="post">
<select name="teste" size="1">
<option>item 01</option>
<option>item 02</option>
</select>
</form>
</div>

</body>
</html>

e os erros que o firefox "acusou":

missing ; before statement
else(selected){\n
mostradiv is not defined
mostradiv(this.value);

o que tem de errado?

Editado Abril 29, 2009 por gean G. Carneiro

Jonathan Queiroz · Abril 29, 2009

Você está passando o valor do elemento por parâmetro e procurando um elemento que tenha um id que tenha esse valor

Tente com o HTML assim:

<select onchange="mostradiv(this)" name="sele&ccedil;&atilde;o" size="1">

E o javascript ficaria assim:

function mostradiv(div){

    if(div){
        div.style.display = 'block';
    }
    
    else(div){
        div.style.display = 'none';
    }
    
}

Obs.: Você também tem a opção de não passar nenhum parâmetro e referenciar o elemento como this em sua função Exemplo:

el1.onclick=function(){
div=this
div.style.display="block"
}

gean G. Carneiro · Abril 29, 2009

Você está passando o valor do elemento por parâmetro e procurando um elemento que tenha um id que tenha esse valor
Tente com o HTML assim:
<select onchange="mostradiv(this)" name="sele&ccedil;&atilde;o" size="1">
E o javascript ficaria assim:
function mostradiv(div){

    if(div){
        div.style.display = 'block';
    }
    
    else(div){
        div.style.display = 'none';
    }
    
}
Obs.: Você também tem a opção de não passar nenhum parâmetro e referenciar o elemento como this em sua função Exemplo:
el1.onclick=function(){
div=this
div.style.display="block"
}

obrigado, mas eu fiz a mesma pergunta al meu irmao e ele me deu a uma resposta que é esta:

<!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=iso-8859-1" />
<title>Mostra e esconde divs</title>
<script type="text/javascript">

function mostradiv(div){

    if(div == 'teste'){
        document.getElementById('teste').style.display = 'block';
        document.getElementById('teste2').style.display = 'none';
        
    }
    
    else{
        document.getElementById('teste').style.display = 'none';
        document.getElementById('teste2').style.display = 'block';
    }
    
}



</script>
</head>
<body>
<form action="teste.html" method="post">
<select onchange="mostradiv(this.value)" name="sele&ccedil;&atilde;o" size="1">
<option value="teste">+ AQUI FICA O TITULO INICIAL</option>
<option value="teste2">- AQUI FICA O TITULO APOS O CLICK DO MOUSE</option>
</select>
</form>
<br>
<div id="teste" style="display:none;">
<form action="teste.html" method="post">
<select name="sele&ccedil;&atilde;o" size="1">
<option>item 01</option>
<option>item 02</option>
<option>item 03</option>
</select>
</form>
</div>
<br />
<div id="teste2" style="display:none;">
<form action="teste.html" method="post">
<select name="teste" size="1">
<option>item 01</option>
<option>item 02</option>
</select>
</form>
</div>

</body>
</html>

agora a ultima e decisiva etapa que ocorreu quando mostrou o resultado:

ao mostra a div teste ela fica numa posição,ok.agora, quando mostra a div teste2 ela fica n'outra posição.

o que eu quero é:

ao mostra a div teste ela fica numa posição e quando mostra a div teste2 ela fica na mesma posição.

gean G. Carneiro · Abril 30, 2009

consegui decobrir como fazer isto e postarei a resposta completa abaixo:

há,agradeço as seguintes pessoas por ter me ajudado:

admnistradora .Andreia.
UBiratã
moderador Jonathan Queiroz

o problema estava na tag <br/> entre a div teste e div teste2:

<!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=iso-8859-1" />
<title>Mostra e esconde divs</title>
<script type="text/javascript">

function mostradiv(div){

	if(div == 'teste'){
		document.getElementById('teste').style.display = 'block';
		document.getElementById('teste2').style.display = 'none';

	}

	else{
		document.getElementById('teste').style.display = 'none';
		document.getElementById('teste2').style.display = 'block';
	}

}



</script>
</head>
<body>
<form action="teste.html" method="post">
<select onchange="mostradiv(this.value)" name="sele&ccedil;&atilde;o" size="1">
<option value="teste">+ AQUI FICA O TITULO INICIAL</option>
<option value="teste2">- AQUI FICA O TITULO APOS O CLICK DO MOUSE</option>
</select>
</form>
<br>
<div id="teste" style="display:none;">
<form action="teste.html" method="post">
<select name="sele&ccedil;&atilde;o" size="1">
<option>item 01</option>
<option>item 02</option>
<option>item 03</option>
</select>
</form>
</div>
<div id="teste2" style="display:none;">
<form action="teste.html" method="post">
<select name="teste" size="1">
<option>item 01</option>
<option>item 02</option>
</select>
</form>
</div>

</body>
</html>

Editado Abril 30, 2009 por gean G. Carneiro

Entrar

(Resolvido) esconder/mostrar div usando seletor

Pergunta

gean G. Carneiro

Link para o comentário

Compartilhar em outros sites

9 respostass a esta questão

Posts Recomendados

.Andreia.

Link para o comentário

Compartilhar em outros sites

gean G. Carneiro

Link para o comentário

Compartilhar em outros sites

UBiratã

Link para o comentário

Compartilhar em outros sites

gean G. Carneiro

Link para o comentário

Compartilhar em outros sites

.Andreia.

Link para o comentário

Compartilhar em outros sites

gean G. Carneiro

Link para o comentário

Compartilhar em outros sites

Jonathan Queiroz

Link para o comentário

Compartilhar em outros sites

gean G. Carneiro

Link para o comentário

Compartilhar em outros sites

gean G. Carneiro

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades