Jquery 如何同时切换div可见性和图像源？

我是jquery的新手，我正在努力处理这个页面：

我有与bios切换刚刚好，但在同一时间，我希望被点击的图像改变的divs。当单击另一个图像时，该图像将更改，当前图像将更改回其原始图像。这似乎不是一件不寻常的事情，但我似乎找不到或想不出答案

任何帮助都将不胜感激！谢谢大家!

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

功能仅显示一个（氯乙烯酮）{
$（'.bio'）。每个（函数（索引）{
if（$（this.attr（“id”）==氯乙烯酮）{
元(此),show(200);；
}
否则{
$（此）.hide（600）；
}
});
}
大面山


马蒂


小雷·查格拉夫


德比斯卡莱塔酒店


斯特森


randomordercontentdisplay.init（）

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