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.
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.
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>
<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
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 { ..... }