根據所選圖像改變圖像和描述

Question

有人問我在這個網站的「服務」部分：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>