根据所选图像更改图像和描述

Question

Someone asked me to recreate this kind of thing, in the "Nos Service" part of this website: http://www.ohmygoodnesscafe.fr/ , there's a gallery of four images. Under the gallery there's the selected image with text. When you click on a different picture, the content is changed accordingly, with the selected image and its description. How can I achieve the same thing? Is there a plugin for this?

Answer 1

 $('#tabs').on('click','li',function(e){ var tab = $(this).data('tab'); $('.pane.' + tab).addClass('active').siblings('.pane.active').removeClass('active'); }); 

 .pane { display:none; padding:20px; } .pane.active { display:block; } #tabs { display:table; margin:0; padding:0; } #tabs li { display:table-cell; background:blue; color:white; padding:10px; cursor:pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="tabs"> <li data-tab="one">One</li> <li data-tab="two">Two</li> <li data-tab="three">Three</li> <li data-tab="four">Four</li> </ul> <div class="pane one active"> One data </div> <div class="pane two"> Two data </div> <div class="pane three"> Three data </div> <div class="pane four"> Four data </div>