Question

我想，我正在尝试做一些看似相对简单的事情。我有一个使用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>

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

提前感谢您的帮助。

Answer 1

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

使用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函数，而不是改变图像源。

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

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.

菜单项按钮单击然后在网页上的不同位置进行imageswap

1 个答案: