jquery - 每当有人单击或悬停在具有 4-5 个超链接（菜单项）的菜单上时，如何使用 jquery 更改 Div 中的图像

Question

我可以想到各种解决方案，例如创建 3 个不同的 HTML 文档，每个文档都有不同的图像，并将这些 HTML 文件链接到我想要更改图像的菜单。

我知道 jquery 是可能的，我只需要一些帮助来理解，这样我就可以实现这一点。

Answer 1

可能你正在寻找这样的东西（见演示）：

HTML

​<div class="menu">
  <a href="#" data-image-src="1.jpg">link 1</a>
  <a href="#" data-image-src="2.jpg">link 2</a>
  <a href="#" data-image-src="3.jpg">link 3</a>
  <a href="#" data-image-src="4.jpg">link 4</a>
  <a href="#" data-image-src="5.jpg">link 5</a>
</div>

​&lt;div id="container">
  <img src="">
</div>​

JavaScript

​$(document).ready(function () {
    $('.menu a').hover(function () {
        $('#container img').attr('src', $(this).data('image-src'));
    });
});​

在此代码中，您放置图像源，当您将鼠标悬停在链接的数据属性中的链接上时应显示该源。当您将鼠标悬停在链接上时，它会调用回调，其中当前的图像来源会发生变化。

更新

见演示

Answer 2

我建议您查看以下内容：

http://api.jquery.com/hover/

http://api.jquery.com/bind/

只需创建一个函数来处理图像交换，然后为元素绑定一个事件处理程序以悬停/单击。

您也可以使用 CSS 来实现这一点，例如 .class:hover { background-image: .... }