My question is the following, when clicking on image 1 appears the div 1, but after clicking on image 2, disappears the div 1 and appears the div 2, and then clicking on the image 3 disappears the div 2 e appears to div.
How can I do this?
Thank you.
You can only do it with CSS, using the 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='http://i.stack.imgur.com/qxjHV.jpg'/>
</a>
<a href='#gato'>
<img src='http://i.stack.imgur.com/YbkW1.jpg'/>
</a>
<div id='cachorro'>
<p>lorem cachorro lorem...</p>
</div>
<div id='gato'>
<p>lorem gato lorem...</p>
</div>Hello, if you want to manipulate the page objects better you can use jquery, I made a basic example
<!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><imgwidth="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>
or only with css you define the object / class
div # img1: target {.....}