Jquery 菜单项按钮单击，然后在网页上的不同位置进行图像交换

我想我正在尝试做一些看起来相对简单的事情。我有一个使用CSS定义的菜单项列表的网页。当我点击其中一个菜单项时，我想改变页面中间的内容（在它自己的DIV容器中）。如果单击了另一个菜单项，我希望内容再次更改。页面中间的内容区域在它自己的div中，所以我想我只是在寻找一个代码，在按钮点击时，用另一个按钮替换一个条目。我已经从JQuery中查看了replaceWith，但似乎看不出该函数在这种情况下是如何工作的。也就是说，从我所读到的内容来看，它不包括单击菜单项的条件。我还通读了CSS样式和z索引，但似乎找不到有效的方法

所以，我的问题是，当单击菜单按钮项时，如何将它自己的div容器中的内容（在这种情况下为.gif）更改为另一个.gif

以下是我对该部分的代码：

<div id="nav_container">
   <ul id="nav">
     <li class="first active"><a href="/" class="index.ph">Home</a></li>
     <li><a href="JPLCSubpages/aboutcoaching/about.html" class="about-coaching">About</a>
       <ul class="about-coaching">
     <li><div class="wicoaching"><a href="index.php" style="border-top:0px">What is Coaching?</a> 
      </div></li>
     <li><div class="wdinacoach"><a href="why-do-i-need-a-coach.php">Why Do I Need a Coach?</a></li>
     <li><div class="coachingtherapy"><a href="isnt-coaching-just-therapy.php">Isn't Coaching Just Therapy?</a></li>
     <li><div class="myphilosophy"><a href="my-coaching-philosophy.php">My Coaching Philosophy</a>
        </li>
      </ul>
    </li>

<li><a href="../coachingservices/services.html" class="services">Services</a>
 <ul class="services">
  <li><a href="../coachingservices/life-coaching.php" style="border-top:0px">Life Coaching</a></li>
  <li><a href="../coachingservices/professional-executive-coaching.php">Professional & Executive Coaching</a></li>
  <li><a href="../coachingservices/group-team-coaching.php">Group & Team Coaching</a>  
  </li>
  <li><a href="../coachingservices/sports-performance-coaching.php">Sports Performance Coaching</a></li>
    </ul>
</li>

      <li><a href="../coachingseminars/seminars.html" class="seminars">Seminars</a></li>
      <li><a href="../coachingcontact/contact.html" class="contact">Contact</a></li>
    </ul>

例如，如果有人单击“What is Coaching？”菜单项，我希望“textbox”中的图像发生变化。在一种情况下，我希望将图像“Aboutme.gif”转换为其他图像。我怎样才能做到这一点？我愿意使用Javascript、JQuery或CSS

---

提前感谢你的帮助

这是一项非常简单的任务，可能是重复的，而且解决方案可以在互联网上轻松找到，但请通读我的答案，如果需要进一步说明，请告诉我

使用javascript事件和函数：

 <li>
   <div class="wicoaching">
   <a href="index.php" style="border-top:0px" onclick="ChangeImage();">
   What is Coaching?</a> 
   </div>
 </li>

现在它从你的DOM中消失了。它将进入ChangeImage函数内部，而不是更改图像源

如果要添加另一个具有不同来源的文件：

var newImage = document.createElement("img");
NewImage.src = 'MyNewImage.jpg';
Parent.appendChild("newImage"); // alternatively, you can reference to parent by its ID or Name using getElementById or a similar method.

---

非常感谢，何塞。那么div中围绕img的“textbox”类就不需要了？我假设您的注释是指向img标签添加id，对吗？可以。再次感谢。谢谢你的帮助，谢谢。知道了。我可以从这里开始。谢谢你的帮助。

<script>
 function ChangeImage{  
       var thePic = document.getElementById('MyImage');
       // Note you need to add a name or image to your img tag.
       thePic.src = "SomeOtherImage.gif"; 
             }
</script>

var imageToBeRemoved = document.getElementById('MyImage');
var Parent = imageToBeRemoved.parentNode;
Parent.removeChild(imageToBeRemoved);

var newImage = document.createElement("img");
NewImage.src = 'MyNewImage.jpg';
Parent.appendChild("newImage"); // alternatively, you can reference to parent by its ID or Name using getElementById or a similar method.