如何同時切換div可見性和圖像源？

Question

我是新來的jQuery，我這個頁面掙扎：http://www.revolutionlasvegas.com/instructors2.php

我與BIOS的div切換得很好，但在同一時間，我想被點擊改變形象。當另一個圖像被點擊時，那個圖像會改變，當前的圖像會變回原來的圖像。似乎這不應該是這樣一個不尋常的事情，但我似乎無法找到或找出答案。

任何幫助將不勝感激！謝謝！

<script> 
     function showonlyone(thechosenone) { 
      $('.bio').each(function(index) { 
        if ($(this).attr("id") == thechosenone) { 
         $(this).show(200); 
        } 
        else { 
         $(this).hide(600); 
        } 
      }); 
     } 
     </script> 
     <div id="light_blue"> 
     <div class="randomordercontent group1"><a id="pic1" href="javascript:showonlyone('bio1');"><img src="images/instructors/thumb_damian.jpg" width="198" height="300" alt="" class="inst_thumbs"></a></div> 
     <div class="randomordercontent group1"><a id="pic2" href="javascript:showonlyone('bio2');"><img src="images/instructors/thumb_martie.jpg" width="198" height="300" alt="" class="inst_thumbs"></a></div> 
     <div class="randomordercontent group1"><a id="pic3" href="javascript:showonlyone('bio3');"><img src="images/instructors/thumb_ray.jpg" width="198" height="300" alt="" class="inst_thumbs"></a></div> 
     <div class="randomordercontent group1"><a id="pic4" href="javascript:showonlyone('bio4');"><img src="images/instructors/thumb_debi.jpg" width="198" height="300" alt="" class="inst_thumbs"></a></div> 
     <div class="randomordercontent group1"><a id="pic5" href="javascript:showonlyone('bio5');"><img src="images/instructors/thumb_stetson.jpg" width="198" height="300" alt="" class="inst_thumbs"></a></div> 
     </div> 

     <div class="bio" id="bio1" style="display: none"><h1 style="font-weight:bold">Damian Hill</h1></br></br></div> 
     <div class="bio" id="bio2" style="display: none"><h1 style="font-weight:bold">Martie</h1></br></br></div> 
     <div class="bio" id="bio3" style="display: none"><h1 style="font-weight:bold">Ray Chargualaf Jr</h1></br></br></div> 
     <div class="bio" id="bio4" style="display: none"><h1 style="font-weight:bold">Debi Scaletta</h1></br></br></div> 
     <div class="bio" id="bio5" style="display: none"><h1 style="font-weight:bold">Stetson</h1></br></br></div> 

     <script type="text/javascript"> 
     randomordercontentdisplay.init() 
     </script> 

Answer 1

you can save src of the image in temp variable and then restore on clicking any other image.. and do replace the image on anchor click.... 

    function showonlyone(thechosenone, ClickedAnchorID) { 
    var temp; 
    $('.bio').each(function(index) { 
    if ($(this).attr("id") == thechosenone) { 
    $(this).show(200); 
    temp = $("#ClickedAnchorID").next('img').attr('href')} 
    else { 
    $(this).hide(600); 
    $("#ClickedAnchorID").next('img').attr('href',temp) 
    } 
    }); 
    }