Skip to main content
adicionou 885 caracteres ao conteúdo
Fonte Link
user60252
user60252
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>Texto<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.Aquario< Cor: azul-claro.</p>
 </div>

<div id="aries" style="display:none">
<p>Texto<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.Arie<</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>
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>Texto....Aquario</p>
 </div>

<div id="aries" style="display:none">
<p>Texto....Arie</p>
 </div>
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>
Fonte Link
user60252
user60252

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>Texto....Aquario</p>
 </div>

<div id="aries" style="display:none">
<p>Texto....Arie</p>
 </div>