Do not tell me, please, how can you implement a change of pictures without refreshing the page? It is desirable when clicking on any thumbnail (img2 / 3/4) it changes places with img1 , but you can just notice the big picture when you click on the thumbnail below.

wat so wat

    2 answers 2

    .block{ position: relative; text-align: center; max-width: 500px; margin: 25px auto; border: 1px solid #ccc; } [id^=s-]{ display: none; } [id^=s-] + label{ margin-top: 310px; display: inline-block; vertical-align: top; width: 40px; height: 40px; line-height: 40px; background: #ccc; } [id^=s-]:checked + label{ background: #f00; } [id^=s-] + label ~ [id^=block-content-]{ display: none; position: absolute; top: 0; left: 50%; margin-left: -150px; width: 300px; height: 300px; line-height: 300px; background: #ccc; font-size: 50px; } #s-1:checked + label ~ #block-content-1, #s-2:checked + label ~ #block-content-2, #s-3:checked + label ~ #block-content-3{ display: block; } #s-2:checked + label, #s-2:checked + label ~ #block-content-2{ background: #FF7F50; } #s-3:checked + label, #s-3:checked + label ~ #block-content-3{ background: #008B8B; } 
     <div class="block"> <input type="radio" name="s" id="s-1" checked /> <label for="s-1">1</label> <div id="block-content-1">1</div> <input type="radio" name="s" id="s-2" /> <label for="s-2">2</label> <div id="block-content-2">2</div> <input type="radio" name="s" id="s-3" /> <label for="s-3">3</label> <div id="block-content-3">3</div> </div>

    • Thank you very much! - Alexey Yavnov 2:51 pm

    You can replace the picture, for example, with:

      clickfunction() { d = new Date(); $("#myimg").attr("src", "/myimg.jpg?"+d.getTime()); }

    Also a similar topic was on enSO .

    Here is the solution for you: http://jsfiddle.net/nz8qy41y/9/

     $('a').on('click', function(e){ $('img').attr('src', $(this).attr('href')); e.preventDefault(); }); 
     li { list-style: none; display: block; float: left; } a { display: block; width: 32px; height: 32px; text-align: center; line-height: 32px; margin: 5px; border: 1px solid blue; } 
     <img src="http://i.stack.imgur.com/fWMVJ.jpg?s=128&g=1&g&s=16" /> <ul> <li><a href="http://i.stack.imgur.com/fWMVJ.jpg?s=128&g=1&g&s=16">1</a></li> <li><a href="http://is2.mzstatic.com/image/thumb/Purple7/v4/44/1a/5d/441a5d52-409a-083d-dfe7-dd51c43732ef/pr_source.png/100x100bb-85.jpg">2</a></li> <li><a href="http://img.scoop.it/ygxGkWUyk2twloZcnxTbnjl72eJkfbmt4t8yenImKBXEejxNn4ZJNZ2ss5Ku7Cxt">3</a></li> <li><a href="http://placekitten.com/g/350/300">4</a></li> </ul>

    • And thank you, but you misunderstood me! - Alexey Yavnov