[Resolvido] visible e hidden

11closed · Janeiro 25, 2010

ola fis um script para esconder e aparecer divs, mais ñ esta funcionando..

olha

<script src="scripts/functions.js" type="text/javascript"></script>

<div id="menupesquisar">
  <ul>
   <li><a href="#" onclick="mostraPesquisaUm(1)" title="Pesquisar por Ordem Alfabética" >Ordem Alfabética</a></li>
   <li><a href="#" onclick="mostraPesquisaDois(1)" title="Pesquisar por Nome Completo" >Nome Completo</a></li>
   <li><a href="#" onclick="mostraPesquisaTres(1)" title="Pesquisar por numero de Telefone" >Telefone</a></li>
   </ul>

<div id="por_nome" style="visibility:hidden;">
   <label>Pesquisar por Nome Completo: <input type="text" name="ncompleto" id="ncompleto" class="pesnormal" onKeyUp="escondeAdm(1); setarCampos_ncompleto(); enviarForm('busca.php', campos, 'divResultado');  return false;"></input></label>
  </div>
<div id="por_tel" style="visibility:hidden;">
   <label>Pesquisar por Telefone: <input type="text" name="telefone" id="telefone" class="pesnormal" onKeyUp="escondeAdm(1); setarCampos_telefone(); enviarForm('busca.php', campos, 'divResultado');  return false;"></input></label>
  </div>
</div>

<div id="alfabetica" style="visibility:hidden;">
  <table>
   <tr>
    <td class="idalf"><a href="" title="">Id</a></td>
    <td class="ncompletoalf"><a href="" title="">Nome completo</a></td>
    <td class="telefonealf"><a href="" title="">Telefone</a></td>
   </tr>
  </table>
 </div>

e aq o javascript

function mostraPesquisaUm(n){
 evt=n;
 if (evt == "1") {
 
  func1=document.getElementById("alfabetica");
  func1.style.visibility="visible";
  func2=document.getElementById("por_nome");
  func2.style.visibility="hidden";
  func3=document.getElementById("por_tel");
  func3.style.visibility="hidden";
 }
}

function mostraPesquisaDois(n){
 evt=n;
 if (evt == "1") {
 
  func1=document.getElementById("alfabetica");
  func1.style.visibility="hidden";
  func2=document.getElementById("por_nome");
  func2.style.visibility="visible";
  func3=document.getElementById("por_tel");
  func3.style.visibility="hidden";
    
 }
}
function mostraPesquisaTres(n){
 evt=n;
 if (evt == "1") {
 
  func1=document.getElementById("alfabetica");
  func1.style.visibility="hidden";
  func2=document.getElementById("por_nome");
  func2.style.visibility="hidden";
  func3=document.getElementById("por_tel");
  func3.style.visibility="visible";
 }
}

quando eu cliko nos link ñ acontece nd, o codigo parece esta certo ñ ta ? qual é erro ?

t+

tanem · Janeiro 25, 2010

usa essa função aqui:

function setCss(id,propriedade) {
	if(ie)
		get(id).style.setAttribute('cssText',propriedade);
	else
		get(id).setAttribute('Style',propriedade);
}

primeiro você deixa suas divs que estão oculta com display:none

depois ao clicar voce chama essa função "setCss(iddadiv,block)"

sendo assim ela vai abrir.

Dee · Janeiro 25, 2010

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>

<head>

#head

{

color:#000000;

background-color:#00DFFF;

text-align:center;

line-height:30px;

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:14px;

font-weight:bolder;

}

.font

{

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:12px;

letter-spacing:2px;

font-weight:bolder;

}

.font2

{

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:12px;

letter-spacing:2px;

}

td

{

border:1px solid lightblue;

}

</style>

function mostraPesquisaUm(id){

if(id == 1)

{

if(document.getElementById("por_nome").style.visibility == "hidden")

document.getElementById("por_nome").style.visibility = "visible";

else

document.getElementById("por_nome").style.visibility = "hidden";

}

else if(id == 2)

{

if(document.getElementById("por_tel").style.visibility == "hidden")

document.getElementById("por_tel").style.visibility = "visible";

else

document.getElementById("por_tel").style.visibility = "hidden";

}

else if(id == 3)

{

if(document.getElementById("alfabetica").style.visibility == "hidden")

document.getElementById("alfabetica").style.visibility = "visible";

else

document.getElementById("alfabetica").style.visibility = "hidden";

}

</script>

<title>Untitled Document</title>

</head>

<body>

<ul>

<li><a href="#" onclick="mostraPesquisaUm(this.id)" id="1" title="Pesquisar por Ordem Alfabética" >Ordem Alfabética</a></li>

<li><a href="#" onclick="mostraPesquisaUm(this.id)" id="2" title="Pesquisar por Nome Completo" >Nome Completo</a></li>

<li><a href="#" onclick="mostraPesquisaUm(this.id)" id="3" title="Pesquisar por numero de Telefone" >Telefone</a></li>

</ul>

<label>Pesquisar por Nome Completo: <input type="text" name="ncompleto" id="ncompleto" class="pesnormal" onmouseclick="escondeAdm(1); setarCampos_ncompleto(); enviarForm('busca.php', campos, 'divResultado'); return false;"></input></label>

</div>

<label>Pesquisar por Telefone: <input type="text" name="telefone" id="telefone" class="pesnormal" onkeyup="escondeAdm(1); setarCampos_telefone(); enviarForm('busca.php', campos, 'divResultado'); return false;"></input></label>

</div>

<table>

<tr>

<td class="ncompletoalf"><a href="" title="">Nome completo</a></td>

<td class="telefonealf"><a href="" title="">Telefone</a></td>

</tr>

</table>

</div>

</body>

</html>

11closed · Janeiro 25, 2010

ola dee

olha dexei assim

<script type="text/javascript">
function mostraPesquisa(id){

 if (id == "a") {
  if (document.getElementById("alfabetica").style.visibility == "hidden")
   document.getElementById("alfabetica").style.visibility = "visible";  
  else
   document.getElementById("alfabetica").style.visibility = "hidden";  
 }
 else if(id == "b"){
  if (document.getElementById("por_nome").style.visibility == "hidden")
   document.getElementById("por_nome").style.visibility = "visible";
  
  else
   document.getElementById("por_nome").style.visibility = "hidden"; 
 }
 else if(id == "c"){
  if (document.getElementById("por_tel").style.visibility == "hidden")
   document.getElementById("por_tel").style.visibility = "visible";
  
  else
   document.getElementById("por_tel").style.visibility = "hidden"; 
 }
} </script>

<li><a href="#" onclick="mostraPesquisa(this.id)" id="a" title="Pesquisar por Ordem Alfabética" >Ordem Alfabética</a></li>
<li><a href="#" onclick="mostraPesquisa(this.id)" id="b" title="Pesquisar por Nome Completo" >Nome Completo</a></li>
<li><a href="#" onclick="mostraPesquisa(this.id)" id="c" title="Pesquisar por numero de Telefone" >Telefone</a></li>

<div id="por_nome" style="visibility:hidden;">
   <label>Pesquisar por Nome Completo: <input type="text" name="ncompleto" id="ncompleto" class="pesnormal" onKeyUp="escondeAdm(1); setarCampos_ncompleto(); enviarForm('busca.php', campos, 'divResultado');  return false;"></input></label>
  </div>
  <div id="por_tel" style="visibility:hidden;">
   <label>Pesquisar por Telefone: <input type="text" name="telefone" id="telefone" class="pesnormal" onKeyUp="escondeAdm(1); setarCampos_telefone(); enviarForm('busca.php', campos, 'divResultado');  return false;"></input></label>
  </div>
<div id="alfabetica" style="visibility:hidden;">
  <table>
   <tr>
    <td class="idalf"><a href="" title="">Id</a></td>
    <td class="ncompletoalf"><a href="" title="">Nome completo</a></td>
    <td class="telefonealf"><a href="" title="">Telefone</a></td>
    <td class="celularalf"><a href="" title="">Celular </a></td>
    <td class="e-mailalf"><a href="" title="">E-mail </a></td>
    <td class="nlocalalf"><a href="" title="">Nome do Local </a></td>
    <td class="imovelalf"><a href="" title="">Imóvel </a></td>
    <td class="Paisesalf"><a href="" title="">Países </a></td>
    <td class="Estadosalf"><a href="" title="">Estados </a></td>
    <td class="Cidadealf"><a href="" title="">Cidades </a></td>
    <td class="bairroalf"><a href="" title="">Bairro </a></td>
    <td class="enderecoalf"><a href="" title="">Endereço </a></td>
    <td class="cepalf"><a href="" title="">Cep </a></td>
    <td class="limiteaalf"><a href="" title="">Limite de Adultos </a></td>
    <td class="limitecalf"><a href="" title="">Limite de Crianças </a></td>
    <td class="pdiariaalf"><a href="" title="">Preço da Diária </a></td>
    <td class="pnatalalf"><a href="" title="">Preço no Natal </a></td>
    <td class="panonovoalf"><a href="" title="">Preço no Ano Novo </a></td>
    <td class="pcarnavalalf"><a href="" title="">Preço no Carnaval </a></td>
    <td class="elocalalf"><a href="" title="">Estrutura do Local </a></td>
    <td class="mlazeresalf"><a href="" title="">Móvies de Lazeres </a></td>
    <td class="regulamentoalf"><a href="" title="">Regulamento </a></td>
    <td class="nosarredoresalf"><a href="" title="">Nos Arredores </a></td>
    <td class="mapaalf"><a href="" title="">Mapa </a></td>
    <td class="loginalf"><a href="" title="">Login </a></td>
    <td class="senhaalf"><a href="" title="">Senha </a></td>
    <td class="Datacadastroalf"><a href="" title="">Data do cadastro </a></td>
    <td class="liberadoalf"><a href="" title="">Liberado </a></td>
    <td class=""><a href="" title=""> </a></td>
    <td class=""><a href="" title=""> </a></td>
   </tr>
  </table>
 </div>

Deu certo aq, so que agora tipo quando eu click no "a" aparece a div "a" se eu clika na div "b" aparece a div "b" e a "a" continua la gostaria que ela ficase hidden de volta.. como fasso ?? t+

Dee · Janeiro 25, 2010

Coloca ela como Hidden dentro do If do B entendeu

Se você clicar no B entao A e C Hidden

Se você clicar no A entao B e C Hidden

Se você clicar no C entao A e C Hidden

Entendeu ?

if (id == "a")
{
  if (document.getElementById("alfabetica").style.visibility == "hidden")
   {
      document.getElementById("alfabetica").style.visibility = "visible";
      document.getElementById("por_nome").style.visibility = "hidden";  
      document.getElementById("por_tel").style.visibility = "hidden";  
   }
  else
  {
      document.getElementById("alfabetica").style.visibility = "hidden"; 
      document.getElementById("alfabetica").style.visibility = "hidden"; 
      document.getElementById("alfabetica").style.visibility = "hidden"; 
  }
}

Só fiz o primeiro para você entender!

11closed · Janeiro 25, 2010

dee tentei fazer assim ñ deu

quando eu clico no link ñ aparece nd

t+

Dee · Janeiro 26, 2010

Assim:

<!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>
<style type='text/css'>
#head
{
        color:#000000;
        background-color:#00DFFF;
        text-align:center;
        line-height:30px;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size:14px;
        font-weight:bolder;
}
.font
{
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size:12px;
        letter-spacing:2px;
        font-weight:bolder;
}
.font2
{
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size:12px;
        letter-spacing:2px;
}
td
{
        border:1px solid lightblue;
}
</style>
<script type="text/javascript">
function mostraPesquisaUm(id){

if(id == 1)
{
	  if(document.getElementById("por_nome").style.visibility == "hidden")
	  {
			document.getElementById("por_nome").style.visibility = "visible";
			document.getElementById("por_tel").style.visibility = "hidden";
			document.getElementById("alfabetica").style.visibility = "hidden";
	  }
	  else
	  {
			document.getElementById("por_nome").style.visibility = "hidden";
	  }
}
else if(id == 2)
{
	  if(document.getElementById("por_tel").style.visibility == "hidden")
	  {
			document.getElementById("por_tel").style.visibility = "visible";
			document.getElementById("por_nome").style.visibility = "hidden";
			document.getElementById("alfabetica").style.visibility = "hidden";
	  }
	  else
	  {
			document.getElementById("por_tel").style.visibility = "hidden";
	  }
}
else if(id == 3)
{  
	  if(document.getElementById("alfabetica").style.visibility == "hidden")
	  {
			document.getElementById("alfabetica").style.visibility = "visible";
			document.getElementById("por_nome").style.visibility = "hidden";
			document.getElementById("por_tel").style.visibility = "hidden";
	  }
	  else
	  {
			document.getElementById("alfabetica").style.visibility = "hidden";
	  }
}
}
</script>
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />
<title>Untitled Document</title>
</head>

<body>
<div id="menupesquisar">
  <ul>
   <li><a href="#" onclick="mostraPesquisaUm(this.id)" id="1" title="Pesquisar por Ordem Alfabética" >Ordem Alfabética</a></li>
   <li><a href="#" onclick="mostraPesquisaUm(this.id)" id="2" title="Pesquisar por Nome Completo" >Nome Completo</a></li>
   <li><a href="#" onclick="mostraPesquisaUm(this.id)" id="3" title="Pesquisar por numero de Telefone" >Telefone</a></li>
   </ul>

<div id="por_nome" style="visibility:hidden;">
   <label>Pesquisar por Nome Completo: <input type="text" name="ncompleto" id="ncompleto" class="pesnormal" onmouseclick="escondeAdm(1); setarCampos_ncompleto(); enviarForm('busca.php', campos, 'divResultado');  return false;"></input></label>
  </div>
  
<div id="por_tel" style="visibility:hidden;">
   <label>Pesquisar por Telefone: <input type="text" name="telefone" id="telefone" class="pesnormal" onkeyup="escondeAdm(1); setarCampos_telefone(); enviarForm('busca.php', campos, 'divResultado');  return false;"></input></label>
  </div>
  
</div>

<div id="alfabetica" style="visibility:hidden;">
  <table>
   <tr>
    <td class="idalf"><a href="" title="">Id</a></td>
    <td class="ncompletoalf"><a href="" title="">Nome completo</a></td>
    <td class="telefonealf"><a href="" title="">Telefone</a></td>
   </tr>
  </table>
 </div>
                                </body>
                                </html>

11closed · Janeiro 26, 2010

isso obrigado dee

ficou assim

<script type="text/javascript">
function mostraPesquisa(id){

 if (id == "a") {
  if (document.getElementById("alfabetica").style.visibility == "hidden"){
  
   document.getElementById("alfabetica").style.visibility = "visible";
   document.getElementById("por_nome").style.visibility = "hidden";
   document.getElementById("por_tel").style.visibility = "hidden";
  } 
  else {
   document.getElementById("alfabetica").style.visibility = "hidden";
  }
 }
 
 else if(id == "b"){
  if (document.getElementById("por_nome").style.visibility == "hidden"){
  
   document.getElementById("alfabetica").style.visibility = "hidden";
   document.getElementById("por_nome").style.visibility = "visible";
   document.getElementById("por_tel").style.visibility = "hidden";
  } 
  else {
   document.getElementById("por_nome").style.visibility = "hidden";
  }
 }
 
 else if(id == "c"){
  if (document.getElementById("por_tel").style.visibility == "hidden"){
  
   document.getElementById("alfabetica").style.visibility = "hidden";
   document.getElementById("por_nome").style.visibility = "hidden";
   document.getElementById("por_tel").style.visibility = "visible";
  } 
  else {
   document.getElementById("por_tel").style.visibility = "hidden";
  }
 }
}
</script>

<li><a href="#" onclick="mostraPesquisa(this.id)" id="a" title="Pesquisar por Ordem Alfabética" >Ordem Alfabética</a></li>
   <li><a href="#" onclick="mostraPesquisa(this.id)" id="b" title="Pesquisar por Nome Completo" >Nome Completo</a></li>
   <li><a href="#" onclick="mostraPesquisa(this.id)" id="c" title="Pesquisar por numero de Telefone" >Telefone</a></li>

<div id="por_nome" style="visibility:hidden;">
   <label>Pesquisar por Nome Completo: <input type="text" name="ncompleto" id="ncompleto" class="pesnormal" onKeyUp="escondeAdm(1); setarCampos_ncompleto(); enviarForm('busca.php', campos, 'divResultado');  return false;"></input></label>
  </div>
  <div id="por_tel" style="visibility:hidden;">
   <label>Pesquisar por Telefone: <input type="text" name="telefone" id="telefone" class="pesnormal" onKeyUp="escondeAdm(1); setarCampos_telefone(); enviarForm('busca.php', campos, 'divResultado');  return false;"></input></label>
  </div>
<div id="alfabetica" style="visibility:hidden;">
  <table>
   <tr>
    <td class="idalf"><a href="" title="">Id</a></td>
    <td class="ncompletoalf"><a href="" title="">Nome completo</a></td>
    <td class="telefonealf"><a href="" title="">Telefone</a></td>
   </tr>
  </table>
 </div>

vlw t+++

Arquivado

[Resolvido] visible e hidden

Recommended Posts

11closed 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

tanem 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Dee 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

11closed 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Dee 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

11closed 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Dee 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

11closed 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante