我如何切换div可见性和图像源在同一时间

Question

我是jquery新手，我正在努力处理这个页面:http://www.revolutionlasvegas.com/instructors2.php

我有div与bios切换只是很好，但同时我想要的图像被点击改变。当另一个图片被点击时，那个会改变当前的会变回原来的。这似乎不应该是一件不寻常的事情，但我似乎找不到或弄清楚答案。

任何帮助都将非常感激!谢谢你！

 <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)
    }
    });
    }