Ir para conteúdo
Fórum Script Brasil
  • 0

(Resolvido) esconder/mostrar div usando seletor

gean G. Carneiro

Perguntado por gean G. Carneiro,

 Share

Pergunta

gean G. Carneiro

gean G. Carneiro

Postado
Postado

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?

Link para o comentário
Compartilhar em outros sites

9 respostass a esta questão

Posts Recomendados

  • 0
UBiratã

UBiratã

Postado
Postado (editado)

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 por .Andreia.
Link para o comentário
Compartilhar em outros sites
  • 0
gean G. Carneiro

gean G. Carneiro

Postado
  • Autor
Postado (editado)

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 por gean G. Carneiro
Link para o comentário
Compartilhar em outros sites
  • 0
.Andreia.

.Andreia.

Postado
Postado

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>

Link para o comentário
Compartilhar em outros sites
  • 0
gean G. Carneiro

gean G. Carneiro

Postado
  • Autor
Postado (editado)

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 por gean G. Carneiro
Link para o comentário
Compartilhar em outros sites
  • 0
Jonathan Queiroz

Jonathan Queiroz

Postado
Postado

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"
}

Link para o comentário
Compartilhar em outros sites
  • 0
gean G. Carneiro

gean G. Carneiro

Postado
  • Autor
Postado
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.

Link para o comentário
Compartilhar em outros sites
  • 0
gean G. Carneiro

gean G. Carneiro

Postado
  • Autor
Postado (editado)

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 por gean G. Carneiro
Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,2k
    • Posts
      651,9k
×
×
  • Criar Novo...