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

Question

有人让我重新创建这种东西，在这个网站的“Nos Service”部分:http://www.ohmygoodnesscafe.fr/ ，有一个包含四张图片的画廊。在画廊下有选定的图像和文字。当您单击不同的图片时，内容会相应更改，包括所选图像及其描述。 我怎样才能达到同样的目的？有这方面的插件吗？

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>