0

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

所以，我的问题是，当单击菜单按钮项时，如何将其自己的 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>


<div id="content_home">

<div style="text-align: left;" class="textbox"><img width="722" height="518" src="../../Images/AboutCoaching Images/AboutMe.gif" alt="" /></div>

例如，如果有人点击“什么是教练？” 菜单项，我想改变“文本框”中的图像。在一种情况下，我想将图像“Aboutme.gif”用于其他图像。我怎样才能做到这一点？我愿意使用 Javascript、JQuery 或 CSS。

在此先感谢您的帮助。

4

1 回答 1

0

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

使用 javascript 事件和函数：

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

这意味着每当有人点击“什么是教练？” 将执行一个名为 ChangeImage 的函数。

现在您需要声明该函数。

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

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

如果您想添加另一个具有不同 Source 的内容： 

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.
于 2013-02-07T06:17:14.637 回答