僅加載div-Tab OnClick

Question

我不知道如何在該代碼中添加點擊操作。問題是，我必須創建一個包含600多張圖片的頁面，這在加載頁面時非常繁重。所以我爲每組圖片選擇了一個我只想通過點擊加載的選項卡。在代碼中現在只有一個選項卡來顯示我的問題。 功能：

$(document).ready(function(){ 
     jQuery('#mycarousel-1, #mycarousel-2, #mycarousel-3, #mycarousel-4, #mycarousel-5, #mycarousel-6, #mycarousel-7').jcarousel({ 
      horisontal: true, 
      wrap:'circular', 
      scroll:1, 
      easing:'easeInOutBack', 
      animation:1200 
     }); 

菜單：

<section id="content"> 
    <div class="page3-row1 pad-2 tabs"> 
     <div class="col-8"> 
      <h2 class="h2 p2">Categorie:</h2> 
      <div class="demo-container clear"> 
      <ul class="list-1 nav"> 
       <li><a href="#tab-1-modern">Modern Design</a></li> 
      </ul> 
     </div> 
    </div> 

代碼：以上

<div class="col-9"> 
    <h3 class="h3-2">Design's:</h3> 
    <div id="tab-1-modern" class="tab-content gallery-photo"> 
     <div class="inner"> 
      <ul id="mycarousel-1" class="jcarousel-skin-tango"> 
       <li><a class="plus"  href="images/modern-001-big_b.jpg"><img src="images/modern-001_b.jpg" alt=""></a><a class="plus"  href="images/modern-002-big_b.jpg"><img src="images/modern-002_b.jpg" alt=""></a><a class="plus"  href="images/modern-003-big_b.jpg"><img src="images/modern-003_b.jpg" alt=""></a><a class="plus"  href="images/modern-004-big_b.jpg"><img src="images/modern-004_b.jpg" alt=""></a></li> 
         <li><a class="plus"  href="images/modern-005-big_b.jpg"><img src="images/modern-005_b.jpg" alt=""></a><a class="plus"  href="images/modern-006-big_b.jpg"><img src="images/modern-006_b.jpg" alt=""></a><a class="plus"  href="images/modern-007-big_b.jpg"><img src="images/modern-007_b.jpg" alt=""></a><a class="plus"  href="images/modern-008-big_b.jpg"><img src="images/modern-008_b.jpg" alt=""></a></li> 
         <li><a class="plus"  href="images/modern-009-big_b.jpg"><img src="images/modern-009_b.jpg" alt=""></a><a class="plus"  href="images/modern-010-big_b.jpg"><img src="images/modern-010_b.jpg" alt=""></a><a class="plus"  href="images/modern-011-big_b.jpg"><img src="images/modern-011_b.jpg" alt=""></a><a class="plus"  href="images/modern-012-big_b.jpg"><img src="images/modern-012_b.jpg" alt=""></a></li> 
         <li><a class="plus"  href="images/modern-013-big_b.jpg"><img src="images/modern-013_b.jpg" alt=""></a><a class="plus"  href="images/modern-014-big_b.jpg"><img src="images/modern-014_b.jpg" alt=""></a><a class="plus"  href="images/modern-015-big_b.jpg"><img src="images/modern-015_b.jpg" alt=""></a><a class="plus"  href="images/modern-016-big_b.jpg"><img src="images/modern-016_b.jpg" alt=""></a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

代碼

現在也的照片。

Answer 1

我是你給予什麼，到目前爲止，這是我能做到的最好怕......

$('#mycarousel-1 li').click(function() { 
    // code here to load the images... 
}); 

[編輯]

<div class="col-9"> 
    <h3 class="h3-2">Design's:</h3> 
    <div id="tab-1-modern" class="tab-content gallery-photo"> 
     <div class="inner"> 
      <ul id="mycarousel-1" class="jcarousel-skin-tango"> 
       <li><a class="plus" thishref="images/modern-001-big_b.jpg"><img src="images/modern-001_b.jpg" alt=""></a><a class="plus"  href="images/modern-002- big_b.jpg"><img src="images/modern-002_b.jpg" alt=""></a><a class="plus"  href="images/modern-003-big_b.jpg"><img src="images/modern-003_b.jpg" alt=""></a><a class="plus"  href="images/modern-004-big_b.jpg"><img src="images/modern-004_b.jpg" alt=""></a></li> 
       <li><a class="plus" thishref="images/modern-005-big_b.jpg"><img src="images/modern-005_b.jpg" alt=""></a><a class="plus"  href="images/modern-006-big_b.jpg"><img src="images/modern-006_b.jpg" alt=""></a><a class="plus"  href="images/modern-007-big_b.jpg"><img src="images/modern-007_b.jpg" alt=""></a><a class="plus"  href="images/modern-008-big_b.jpg"><img src="images/modern-008_b.jpg" alt=""></a></li> 
       <li><a class="plus" thishref="images/modern-009-big_b.jpg"><img src="images/modern-009_b.jpg" alt=""></a><a class="plus"  href="images/modern-010-big_b.jpg"><img src="images/modern-010_b.jpg" alt=""></a><a class="plus"  href="images/modern-011-big_b.jpg"><img src="images/modern-011_b.jpg" alt=""></a><a class="plus"  href="images/modern-012-big_b.jpg"><img src="images/modern-012_b.jpg" alt=""></a></li> 
       <li><a class="plus" thishref="images/modern-013-big_b.jpg"><img src="images/modern-013_b.jpg" alt=""></a><a class="plus"  href="images/modern-014-big_b.jpg"><img src="images/modern-014_b.jpg" alt=""></a><a class="plus"  href="images/modern-015-big_b.jpg"><img src="images/modern-015_b.jpg" alt=""></a><a class="plus"  href="images/modern-016-big_b.jpg"><img src="images/modern-016_b.jpg" alt=""></a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

和腳本如下：

$('#mycarousel-1 a').click(function() { 
    // this loads each image the same, but you can use the same technique to 
    // load the correct images for each image 
    var imgurl = $(this).attr('thishref'); 
    $(this).find('img').each(function() { 
     $(this).attr('src',imgurl); 
    }); 
});