Ir para conteúdo

POWERED BY:

Arquivado

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

ze_violeiro

Mostrar ocultar div

Por , em Javascript

Recommended Posts

ze_violeiro    0

ze_violeiro
Postado

olá

tenho duas DIV

 

<div id="liberal" style="visibility:hidden; position:relative;"></div><div id="empresas" style="visibility:hidden; position:relative"></div>

gostaria de mostrar e ocultar elas no memso lugar, tentei usando display none, mas ai nenhuma das duas aparece com meu código JS vejam.

 

function showLiberal() {	  document.getElementById("liberal").style.visibility = "visible";	  document.getElementById("liberal").style.dysplay = "block";	}	function hideLiberal() {		document.getElementById("liberal").style.dysplay = "none";	  document.getElementById("liberal").style.visibility = "hidden";	}	function showEmpresa() {	  document.getElementById("empresas").style.visibility = "visible";	  document.getElementById("empresas").style.dysplay = "block";	}	function hideEmpresa() {	  document.getElementById("empresas").style.dysplay = "none";	  document.getElementById("empresas").style.visibility = "hidden";	}

as radios que devem mostrar e ocultar as DIV's são

SOU <input name="tipocliente" id="tipocliente" type="radio" value="liberal" onClick="showLiberal();hideEmpresa();" />Profissional Liberal ou prestador de serviço <input name="tipocliente" id="tipocliente" type="radio" value="empresa" onClick="showEmpresa();hideLiberal();" /> Pessoa Jurídica

se alguem puder me ajudar.

 

valew

Compartilhar este post

Link para o post
Compartilhar em outros sites

cassiano óliver    1

cassiano óliver
Postado

to com fome hahah

pokin de pressa tbm!

 

<script type="text/javascript"> function mostrar(id) { 	radio = document.getElementById(id);	div = document.getElementById("id_da_sua_div");	if (radio.checked != true) {		div.style.display = "none";	}	else {		div.style.display = "block";	}} </script>

no radio...

<input class="InputRadio" type="radio" name="rfoto" id="radio" onClick="java script:mostrar('radio');" />Texto

tenta adaptar...

 

espero ter ajudado...

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado

Re-editado! O código que havia postado antes apresentou erros com textos maiores.

O novo código redimensiona a tabela para qualquer tamanho de texto.

 

Desculpem a falta de atenção!

 

Eis o novo script:

<html>
<head>
	<title>Mostrar / Ocultar Divs</title>
</head>
<body>
<script type="text/javascript">
/*
Código desenvolvido e testado por: klonder
Postagem exclusiva em: www.forum.imasters.com.br
*/
function escrever(el) {
var objTexto = document.getElementById("texto"+el);
var texto1 = document.getElementById("texto1");
var texto2 = document.getElementById("texto2");
//Apagando todos os divs existentes
//Você poderia utilizar um laço para muitos divs
texto1.style.display = "none";
texto2.style.display = "none";

//Exibindo apenas o div que foi passado como parâmetro na função.
objTexto.style.display = "block";
}
</script>

<table border="1" style="width:500px">
<tr>
        <td valign="top">
        Clique nos links abaixo:
        <br>
        <a href="javascript: escrever(1)">Texto1</a>
        <br><a href="javascript: escrever(2)">Texto2</a>
        </td>
        <td width="70%" valign="top">
        <div id="texto1" style="position:relative; display:none">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</div>
        <div id="texto2" style="position:relative; display:none">Ajax é a abreviação para 'Asynchronous Javascript and XML'. O objetivo dessa técnica é criar aplicações Web mais interativas e dinâmicas melhorando assim a experiência do usuário. Ajax não é uma tecnologia mas sim um termo que se refere ao uso de um grupo de tecnologias integradas (HTML/XHTML + XML/SLT + CSS + DOM + Javascript + XMLHttpRequest).Fórum Moderado por: klaygomes</div>
        
        </td>
</tr>
</table>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tulin    0

Tulin
Postado

haha vou aproveitar a pergunta do cara e perguntar tb ...

 

eu to fazendo praticamente a msma coisa que ele so que no php, eu quero clicar no botao e mostrar uma div. ela ja ta com display:none

to tentando assim \/

mas nao funciona :(, eu ja adicionei a funcão exatamente = a que você postou klonder.

 

echo"<input type='submit' name='submeter' onClick='java script:escrever(texto1)'>";

 

if (onClick.submeter = 'true'){ java script: escrever(texto1)}

 

tentei da seguinte forma também e nada :(

so pra lembrar que eu ja mudei o nome da div que eu quero mostrar para Texto1 :)

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado

O script que eu havia postado anteriormente foi atualizado. Testei aqui e não tive problemas.

Por favor, copie-o e tente novamente.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tulin    0

Tulin
Postado

haha acho que meu problema ta em fazer scripts em php, eu testei o script em uma pagina html e ele funcionou normalmente.. mas quando eu jogo no php da pal

pra eu criar o script no php e que n to sacando... presisa colocar echo"<script>.....</script>" assim nao deu e eu sapequei o script na tela sem colocar echo deu erro de sintax :P, tu sabes o que pode ser ? :)

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado

Existem muitas possibilidades que justifiquem o erro. Uma simples aspas ("") colocada em local indevido pode comprometer tudo.

 

Se você estiver colocando o javascript dentro do PHP, também tem que tomar cuidado.

 

Se estiver fora, você faz assim:

<?php
Código php sem javascript
?>

<script type="text/javascript">
Código javascript fora do bloco PHP
</script>

<?php
Continuação do código php
?>

Tem algum link para que possamos ver o código ou você pode mostrar o código para nós, por gentileza?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tulin    0

Tulin
Postado

olha.. 1 exemplo de erro ..

<!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>Ocultando uma div com jQuery</title>
<script type="text/javascript">
function mostra(item1){
        var item1 = document.getElementById(item1);
        if (item1.style.display=='none'){
                item1.style.display='';
        }else{
                item1.style.display='none';
        }
}
</script>

<script>

function abrefecha(obj){ 
var el = document.getElementById(obj); 
if(el.style.display != "block"){ 
el.style.display = "block"; 
}else{ 
el.style.display = "none"; 
} 
} 
</script>

</head>
<body>
<input type='submit' name="submeter" onclick="abrefecha('item1');">

  <div id="item1" style="position:absolute; display:none"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pulvinar, enim ac hendrerit mattis, lorem mauris vestibulum tellus, nec porttitor diam nunc tempor dui. Aenean orci. Sed tempor diam eget tortor. Maecenas quis lorem. Nullam semper. Fusce adipiscing tellus non enim volutpat malesuada. Cras urna. Vivamus massa metus, tempus et, fermentum et, aliquet accumsan, lectus. Maecenas iaculis elit eget ipsum cursus lacinia. Mauris pulvinar.
 
  </div>



<a href="#" onclick="abrefecha('divum');">Mostrar DIV 1</a>
<a href="#" onclick="abrefecha('divdois');">Mostrar DIV 2</a>

<div id="divum" style="display:none;">DIV NÚMERO UM</div>
<div id="divdois" style="display:none;">DIV NÚMERO DOIS</div>

</body>
</html>
<?php
echo"<html>
<body>
<script>
function abre(obj){ 
var el = document.getElementById(obj); 
if(el.style.display != 'block'){ 
el.style.display = 'block'; 
}else{ 
el.style.display = 'none'; 
} 
} 
</script>
</body>
</html>";
echo"<a href='#' onclick='abre('div1');'> mostrar div</a>";
echo"<div id='div1' style='display:none;'>DIV NÚMERO UM</div>"
?>

 

 

o que ta dentro do html funciona... o que esta dentro do php não = ).. isso e a pagina que eu fiz de testes aqui =)

 

por favor desconsidere o primeiro script la do html..

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

E pra que dar echo num Javascript dessa maneira?

Não faz o menor sentido. Apenas consome processamento desnecessário do servidor.

 

'Não funciona', mas retorna algum erro? Qual ?

Notou que está usando as aspas de forma incorreta ?

echo '<a href="#" onclick="abre(\'div1\');"> mostrar div</a>';

-> Apenas use aspas duplas no php, se precisar que o conteudo dentro dessa string seja interpretado.

Se não, use aspas simples.

-> Sempre use aspas duplas para delimitar os valores de atributos HTML

 

a saída HTML aqui está errada mesmo: 

onclick='abre('div1');'
assim, o interpretador não sabe onde termina a declarção do evento onclick, e onde deveria começar a chamada da função JS.

 

Mas ainda assim, não entendi oque você pretente com isso.

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