-2

Meu problema é o seguinte: Preciso q um texto invisível fique visível quando o usuário clica na imagem. Até aí tudo bem, mas não consigo fazer com q o texto comece invisível na página.. Esse é meu programa (trata-se de signos):

<script language = "javascript">
function mudar(id) {
        var display = document.getElementById(id).style.display;
        if(display == "none")
            document.getElementById(id).style.display = 'block';
		else
			document.getElementById(id).style.display = 'none';
             
	}
</script>
<body>
<div style = "text-align: center;" id = "imagens">
imagens...
.
.
.
</div>

<p><a href = "javascript:mudar('aquario')"></a></p>
<div id = "aquario">
<p>Texto....</p>
 </div>

<p><a href = "javascript:mudar('aries')"></a></p>
<div id = "aries">
<p>Texto....</p>
 </div>  //etc..
</body>

Está quase do jeito q eu quero, mas quando a página carrega, o texto q deveria estar invisível está visível, quando clico na imagem ele desaparece e se eu clicar de novo ele reaparece, mas preciso q a página carregue com ele invisível e não achei nenhuma solução para o meu problema. Espero q alguém possa me ajudar! Obrigada! Obs: Não dá para executar o programa pois não coloquei todos os detalhes, só coloquei o q achei necessário para a informação

0

1 Resposta 1

0

1 - acrescente esse css display:none" nas divs

<div id="aquario" style="display:none">
<div id="aries" style="display:none">
.....................................
.....................................

2 - O evento onclick="mudar()" diretamente nas imagens

<img .....  onclick="mudar('aquario')">
<img .....  onclick="mudar('aries')">
.....................................
.....................................

3 - essas linhas

 <p><a href = "javascript:mudar('aquario')"></a></p>
 <p><a href = "javascript:mudar('aries')"></a></p>
 .................................................
 ................................................

são desnecessárias

Exemplo

function mudar(id) {
        var display = document.getElementById(id).style.display;
        if(display == "none")
            document.getElementById(id).style.display = 'block';
        else
            document.getElementById(id).style.display = 'none';
    }
 <!DOCTYPE html>
<div style = "text-align: center;" id="imagens">
<img border="0" src="https://i.sstatic.net/jtV5d.png" width="33" height="42" onclick="mudar('aquario')">
<img border="0" src="https://i.sstatic.net/xDmzy.png" width="33" height="42" onclick="mudar('aries')">
</div>


<div id="aquario" style="display:none">
<p>Vai sobrar disposição para correr atrás de suas metas. Mudanças no visual podem render elogios. Uma amizade pode atravessar altos e baixos: paciência! Sexo em alta, mas fuja de brigas. Palpites: 15, 96 e 78. Cor: azul-claro.</p>
 </div>

<div id="aries" style="display:none">
<p>Imprevistos podem surgir: vá com calma e preste atenção em tudo o que fizer. Na vida a dois, seu amor pode estar precisando da sua ajuda. Na cama, porém, a paixão vai pegar fogo! Palpites: 05, 14 e 95. Cor: azul-marinho.</p>
 </div>

Uma solução alternativa Pode fazer somente com CSS, usando o seletor target:

div { display: none }         /* Por padrão, os divs iniciam ocultos. */
div:target { display: block } /* Exibe quando o elemento é alvo. */
<a href='#aquario'>
  <img border="0" src="https://i.sstatic.net/jtV5d.png" width="33" height="42">

</a>
<a href='#aries'>
<img border="0" src="https://i.sstatic.net/xDmzy.png" width="33" height="42">
</a>

<div id='aquario'>
  <p>Vai sobrar disposição para correr atrás de suas metas. Mudanças no visual podem render elogios. Uma amizade pode atravessar altos e baixos: paciência! Sexo em alta, mas fuja de brigas. Palpites: 15, 96 e 78. Cor: azul-claro.</p>
</div>
<div id='aries'>
  <p>Imprevistos podem surgir: vá com calma e preste atenção em tudo o que fizer. Na vida a dois, seu amor pode estar precisando da sua ajuda. Na cama, porém, a paixão vai pegar fogo! Palpites: 05, 14 e 95. Cor: azul-marinho.</p>
</div>

1
  • Muito obrigada, vc realmente me ajudou!! Obrigada msm!
    – Paula
    Commented 10/12/2017 às 18:47

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .