0

A minha dúvida é a seguinte, ao clicar na imagem 1 aparece a div 1, mas depois ao clicar na imagem 2, desaparece a div 1 e aparece a div 2, e depois ao clicar na imagem 3 desaparece a div 2 e aparece a div.

Como poderei fazer isso?

Obrigado.

1
  • Dependendo do que precisar fazer, talvez o que você esteja procurando seja por um Accordion. Veja exemplo: jqueryui.com/accordion
    – Caio
    Commented 16/02/2018 às 0:04

2 Respostas 2

2

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='#cachorro'>
  <img src='https://i.sstatic.net/qxjHV.jpg'/>
</a>
<a href='#gato'>
  <img src='https://i.sstatic.net/YbkW1.jpg'/>
</a>

<div id='cachorro'>
  <p>lorem cachorro lorem...</p>
</div>
<div id='gato'>
  <p>lorem gato lorem...</p>
</div>

5
  • No caso, como aplicaria 5 imagens e 5 divs? Obrigado.
    – Gonçalo
    Commented 18/03/2016 às 23:00
  • 1
    Criando um <a> (contendo a imagem) para cada um dos divs, vinculando o href do link com o id do div. Commented 18/03/2016 às 23:04
  • Obrigado, consegui fazer é isso mesmo!
    – Gonçalo
    Commented 18/03/2016 às 23:07
  • Agora que tentei aplicar ao meu exemplo, o site ficou todo bugado.
    – Gonçalo
    Commented 19/03/2016 às 0:00
  • O que me refiro é que todas as divs ficam bugadas.
    – Gonçalo
    Commented 19/03/2016 às 14:41
1

Olá, caso queira manipular melhor os objetos da página você pode utilizar jquery, fiz um exemplo básico

<!DOCTYPE html>
     <html>
     <head>
     <meta charset="UTF-8">
     <title>slider</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <style>
        #div1 { background-color: yellow }
        #div2 { background-color: blue }
        #div3 { background-color: green }
    </style>
     <script>
        $(function(){
            $('#div1,#div2,#div3').css({'float':'left','margin-top':'300px'}).hide();
            $('#img1,#img2,#img3').css({'cursor':'pointer'});
            $('#img1').click(function(){
                $('#div1').fadeIn('slow');
                $('#div2,#div3').fadeOut('slow');
            });
            $('#img2').click(function(){
                $('#div2').fadeIn('slow');
                $('#div1,#div3').fadeOut('slow');
            });
            $('#img3').click(function(){
                $('#div3').fadeIn('slow');
                $('#div2,#div1').fadeOut('slow');
            });
        });
     </script>
     </head>

     <body>
         <img width="50" height="50" id="img1" border="1">
         <img width="50" height="50" id="img2" border="1">
         <img width="50" height="50" id="img3" border="1">

         <div id="div1">div1</div>
         <div id="div2">div2</div>
         <div id="div3">div3</div>
     </body>
     </html>

ou somente com css você define o objeto/classe

div#img1:target { ..... }

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 .