jQuery Tabs-加载选项卡时在选项卡之外更改内容

Question

I've been looking around and I can't seem to figure out how to do this. Basically my setup is this:

<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 -->

What I want to do is when I click on tab-image1 or 2 then the thumbnail in sectionHeader also gets changed. Is this possible?

Thank you.

Answer 1

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

or

$('.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;
     }
 }
});