jQuery Tabs - 當標籤加載時更改標籤外的內容

Question

我一直在環顧四周，我似乎無法弄清楚如何做到這一點。基本上我的設置是這樣的：

<script> 
    $(function() { 
     $(".tabs").tabs(); 

    }); 

</script> 

<div class="tabs"> 
<div class="Content"> 

<div id="tab-image1"> 
    <div class="plusIcon"></div><img src="attachments/images/testImage.jpg" width="255" height="283" alt="Test Image" /> 
    <div class="description"> 
     Info 
    </div> 
</div> 

<div id="tab-image2"> 
    <div class="plusIcon"></div><img src="attachments/images/testImage2.jpg" width="255" height="283" alt="Test Image" /> 
    <div class="description"> 
     Info 
    </div> 
</div>  

</div> <!-- end .Content --> 

<div class="Nav"> 

<ul> 
<li class="text">Select a cartoon:</li> 
<li><a href="#tab-image1"><img src="attachments/images/testThumbnail.jpg" width="71" height="71" alt="Test Thumbnail" /></a></li> 
<li><a href="#tab-image2"><img src="attachments/images/testThumbnail2.jpg" width="71" height="71" alt="Test Thumbnail" /></a></li> 
</ul> 

</div> <!-- end .Nav --> 

</div> <!-- end .tabs --> 

<div class="Container" id="uptEPT"> 

<div class="Header"> 

<div class="uptTitle"></div> 
<div class="number">3</div> 
<div class="title">   

<div class="plusIcon"></div><img id="replace" src="attachments/images/testThumbnail.jpg" width="71" height="71" alt="Test Thumbnail" /> 

</div> 

</div> <!-- end .Header --> 
</div> <!-- end .Container --> 

我想做的事，當我點擊製表圖像1或2，然後在sectionHeader縮略圖也得到改變是。這可能嗎？

謝謝。

Answer 1

$('.tabs').tabs({ 
    select: function(event, ui) { 
     $('#replace').attr('scr', $('img', ui.tab).attr('scr')); 
    } 
}); 

或

$('.tabs').tabs({ 
select: function(event, ui) { 
    switch (ui.index) { 
     case 0: 
     // first tab selected, replace with image 1 
     $('#replace').attr('scr', 'path-to-image1'); 
     break; 
     case 1: 
     // second tab selected, replace with image 2 
     $('#replace').attr('scr', 'path-to-image1'); 
     break; 
    } 
} 
});