Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom dia a todos.
Primeiro eu gostaria de dizer que sou iniciante nesta parte de web e ainda estou dando os meus primeiros passos em JavaScript e CSS.
Eu pesquisei aqui no forum sobre o assunto mas não achei nenhum post que me ajudase a descobrir o porque o meu exemplo não funciona.
Eu desenvolvi um código a onde tenho dois formulários, que inicialmente ficam ocultos, e dois links a onde a idéia é a seguinte:
Ao clicar no link 1, o formulário 1 aparece e faz o formulário 2 se ocultar.
Ao clicar no link 2, o formulário 2 aparece e faz o formulário 1 se ocultar.
O código até "funciona" mas, após executar o script que oculta um dos formulários e exibe o outro, ele volta ao estado inicial a onde ambos os formulários ficam ocultos.
Será que alguém pode me ajudar a identificar o meu erro ?
Obrigado.
<!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>
</head>
<body>
<div id="idMenuEsquerdo" style="float:left">
<a href="" id="idLink1" onclick="ufExibirOcultar(this);">Link 1</a> <br/>
<a href="" id="idLink2" onclick="ufExibirOcultar(this);">Link 2</a> <br/>
</div>
<div id="idCorpo" style="float:left">
<div id="idCampo1" style="display:none">Campo1</div>
<div id="idCampo2" style="display:none">Campo2</div>
</div>
<script>
function ufExibirOcultar(objElemento)
{
if(objElemento.id == "idLink1")
{
document.getElementById("idCampo1").style.display = "block";
document.getElementById("idCampo2").style.display = "none";
}
else
{
document.getElementById("idCampo1").style.display = "none";
document.getElementById("idCampo2").style.display = "block";
}
}
</script>
</body>
</html>>
Como está o CSS?
Se você utilizar 'display: none' nos dois eles vão sumir mesmo...
Na verdade o CSS são estes styles que estam no exemplo.
O fato de eu usar a função javascript para mudar o style não deveria fazer com que eles ficassem visíveis permanentemente?
O problema é que eles ficam visiveis por uma fração de segundo e logo depois voltam a ficar ocultos.
Ou seja, o javascript faz eles ficarem visiveis, mas alguma outra coisa (que não faz parte do meu código) faz eles voltarem a ficar invisíveis.
O contrário também é verdadeiro, se eu mudar o style para display:block, ambos começam visíveis e ao clicar em um dos links um deles fica oculto por uma fração de segundos e depois volta a ficar visível.
Isso acontece porque logo após mostrar a div oculta, ele redireciona para o link clicado.
Uma solução, caso você realmente não queira ser redirecionado, é usar o return.
<div id="idMenuEsquerdo" style="float:left">
<a href="" id="idLink1" onclick="return ufExibirOcultar(this);">Link 1</a> <br/>
<a href="" id="idLink2" onclick="return ufExibirOcultar(this);">Link 2</a> <br/>
</div>
<div id="idCorpo" style="float:left">
<div id="idCampo1" style="display:none">Campo1</div>
<div id="idCampo2" style="display:none">Campo2</div>
</div>
<script>
function ufExibirOcultar(objElemento)
{
if(objElemento.id == "idLink1")
{
document.getElementById("idCampo1").style.display = "block";
document.getElementById("idCampo2").style.display = "none";
}
else
{
document.getElementById("idCampo1").style.display = "none";
document.getElementById("idCampo2").style.display = "block";
}
return false;
}
</script>>
Isso acontece porque logo após mostrar a div oculta, ele redireciona para o link clicado.
Uma solução, caso você realmente não queira ser redirecionado, é usar o return.
Perfeito !
Funcionou exatamente como deveria ! Muito Obrigado Carlos.
Tenho mais uma dúvida:
Utilizar links em branco, como eu utilizei no exemplo, é uma forma correta de se fazer o usuário interagir com a página para ocultar/exibir informações na mesma ? Ou seria apenas uma gambiarra que deve-se evitar ?
OBS:
Só para constar, as alterações no meu código de exemplo foram as seguintes:
* Linhas 10 e 11 -> Fazer o evento onclick retornar a resposta da função.
* Linha 32 -> Fazer a função ufExibirOcultar retornar false.
Se ele não deve levar para lugar nenhum, utilize href="#" ou href="javascript:void(0)".
Como está o CSS?
Se você utilizar 'display: none' nos dois eles vão sumir mesmo...