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

我想要做的是，当我单击 tab-image1 或 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;
     }
 }
});