0

我正在尝试设置一个菜单选择，类似于加拿大梅赛德斯-奔驰在您选择汽车时的菜单选择，并且有多个车身选项。（http://www.mercedes-benz.ca/content/canada/mpc/mpc_canada_website/en/home_mpc/passengercars.flash.skipintro.html）。

我在这里创建了它http://jsfiddle.net/sofew/db2BF/3/ 我想将鼠标悬停在轿跑车标题上，信息和图片将更改为轿跑车列表项。

我尝试了各种形式的 jquery，但我似乎无法让它按我希望的方式工作。有人可以指出我正确的方向。

4

2 回答 2

1

如果您希望根据您悬停的元素显示菜单，则需要使用 AJAX。您可以使用 jQuery 中的 load() 方法用 AJAX 查询的返回值填充选定元素。

这意味着您只需要一个隐藏元素，当触发 onhover 事件时，div 被清除，填充 AJAX 数据，然后显示。您只需将车辆的 ID 或名称传递给接受 AJAX 查询的方法，以便它可以返回相关数据。

如果您指定服务器端语言，如果您不熟悉 AJAX 调用，我可能会给您一个更具体的示例。

编辑：

Ajax 真的很容易做到！Ajax 所做的只是调用 Web 服务器上的一个函数，然后获取该调用的结果并将其放在页面的某个位置，而无需重新加载页面本身。如果您在 Linux 上使用 PHP，那么假设您想在页面上显示当前服务器时间。你可以做一个这样的功能......

public function WhatTimeIsIt()
{
    return time();
}

然后在您的页面上创建一个 id 为“时间”的 div。然后你需要做的就是在你的 jQuery 中，使用下面的调用：

[event handler] {
    $('#time').load([path to the WhatTimeIsIt() function]);
}

并且当该给定事件处理程序被触发时，您的时间 div 将更新以包含当前服务器时间。一个简单的例子，但是如果你创建了一个以汽车 ID 作为参数的函数，获取关于汽车的所有信息并将其格式化为漂亮的 HTML 并返回，你就会得到你的解决方案。

于 2012-08-03T22:05:12.763 回答
0

我做了一个你可以使用的演示：http: //jsfiddle.net/DFXZn/22/。

我建议使用 $.ajax 来获取内容。访问此处了解 ajax 调用：http ://api.jquery.com/category/ajax/ 。让我知道这是否有帮助。快乐编码！

于 2012-08-03T23:00:37.773 回答