首先，我是脚本新手，需要您的帮助。我正在努力实现以下目标：
我有四个项目要在我的网站上展示。这些项目通过图像可见。当人们将鼠标悬停在图像上时，名为“info”的 div 将显示他们悬停的项目的附加信息。
所以要清楚，将通过悬停触发的数据进入相同的 div“信息”：
将鼠标悬停在图像 1 -> 将项目 1 的信息加载到 -> div "info"
将鼠标悬停在图像 2 -> 将项目 2 的信息加载到 -> div "info" 等。
有朋友告诉我用ajax和xml，这样组合好吗？
谢谢您的帮助
问问题
529 次
3 回答
1
您说得对，在页面上动态加载内容的好方法是使用 Javascript 和 XML。使用 JavaScript 的一个好方法是加载一个库来帮助您对 HTML 页面的内容进行操作。我绝对推荐 JQuery。
我强烈建议不要从单独的文件中加载信息，除非内容是一大堆非常大的图像。
看看这个视频：JQuery for Designers他们做了一些非常棒的视频，帮助我在刚开始时理解 JQuery。我刚刚链接到的页面有一些很棒的技术可以将内容切换到同一个地方，并且还会为您提供一些重要的 UX（用户体验）提示。
于 2013-10-08T22:14:02.600 回答
1
Ajax 是获取数据的最佳选择....
但是变化来自什么类型的数据......
如果您需要数据库中的值JSON将是我的选择
或者
- 没关系任何数据都可以平滑地框起来
如果你没有太多的脚本编写
只需使用 Jquery 插件通过简单的调用来检索数据
以及如何使用的指南
于 2013-10-08T23:11:02.257 回答
-1
谢谢大家的回复。
我通过使用 Mark 给出的技术，使用 html 和 css 暂时解决了这个问题。但是，我认为使用 javascript 可以使事情变得更容易和更有条理。我对脚本的了解还不够好。我在下面为其他人发布了我的 html。
我仍然有一个问题，如何使用图像的 id 作为检索特定信息部分的参数。例如：我有一个 id=img1 的图像和一个包含子参数的 xml 文件。因此，当我将鼠标悬停在图像上时，js 会获取该图像的 id，然后将 xml 的特定部分加载到“info”div 而不是整个 xml。（回答亚当的问题，数据类型就是文本）
enter code here
<!DOCTYPE html>
<html>
<head>
<style>
div.maincontent{
border: none;
margin:0px;
padding:0px;
}
div.leftcol, div.rightcol {
/*
* Note that the left column and the right column use position fixed
* to make placement of the elements on top easier.
*/
position:fixed;
top:0px;
width:200px;
height: 100%;
background-color: green;
color: white;
}
div.leftcol{
left:0px;
}
div.rightcol{
right:0px;
}
div.middlecontent{
/*
* Note the left and right margin to place the div.
* With this margin you can
*/
margin:0px 200px 0px 200px;
position: absolute;
top:0px;
left:0px;
}
div.square{
float:left;
margin:0px;
width:200px;
height:200px;
border:10px solid black;
background-color: blue;
}
div.left_content, .right_content {
/*
*Initially do not display the div.left_content
*and div.right_content.
*I still set the all the styles here the divs have in common.
*/
margin:0px;
position:fixed;
margin:0px;
top:0px;
width:200px;
height: 100%;
background-color: blue;
color:white;
display: none; /* do not display */
}
div.square:hover > div.left_content {
/*
*When you hover over a square take from the children
*those with div.left_content and display them.
*The left one is displayed on top of the left div.leftcol
*/
left:0px;
display:block;
}
div.square:hover > div.right_content {
/*
*When you hover over a square take from the children
*those with div.right_content and display them.
*The right one is displayed on top of the right div.rightcol
*/
right:0px;
display:block;
}
</style>
</head>
<body>
<div class="maincontent">
<div class="leftcol">
<p>
Hover over the blue divs in the middle
</p>
<p>
This trick uses the > to find children of an element.
The children are only displayed when hovering over the parent element.
Look at the CSS how that is done. for instance for the left div it is
div.square:hover > div.left_content
</p>
<p> something inside the left column</p>
</div>
<div class="rightcol">
<p>something inside the right column</p>
</div>
<div class="middlecontent">
<div class="square">
<!--
this div has two children
a div with class="left_content" and
a div with class="right_content"
-->
<div class="left_content">
<p> first div </p>
<p> something as left content </p>
</div>
<div class="right_content">
<p> first div </p>
<p> something as right content </p>
</div>
</div>
<div class="square">
<div class="left_content">
<p> second div </p>
<p> something as left content </p>
</div>
<div class="right_content">
<p> second div </p>
<p> something as right content </p>
</div>
</div>
<div class="square">
<div class="left_content">
<p> third div </p>
<p> something as left content </p>
</div>
<div class="right_content">
<p> third div </p>
<p> something as right content </p>
</div>
</div>
</div>
</div>
</body>
</html>
于 2013-10-10T12:37:29.490 回答