悬停选择以显示隐藏的项目

Question

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

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

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

Answer 1

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

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

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

编辑：

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

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

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

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

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

Answer 2

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

我建议使用$ .ajax来抓取内容。访问此处了解ajax电话：http://api.jquery.com/category/ajax/。如果这有帮助，请告诉我。快乐的编码！