将内容加载到div
我正在尝试创建一个页面，其中包含用户将鼠标悬停在同一页面上的图像。到目前为止，我已经创建了html文件和样式表。这是一个相当简单的基于表格的页面，其中三个图像具有css悬停效果，并链接到三个不同的页面。我的挑战是弄清楚如何将内容加载到div中。我对Javascript完全陌生，所以这将是我想象中的学习曲线，但任何帮助将被赞赏。我附上了一张图片来说明我正在尝试做什么。谢谢大家]将内容加载到div
更新的问题。感谢您为每个人输入。 （返回从假期 - 将去在建议）
我的CSS代码：
.Image1{
background-image:url('Image1_REG.jpg');
height:86px;
width:86px;
display: block;
}
.Image1:hover {
background-image:url('Image1_Shadow.jpg');
height:86px;
width:86px;
display:block;
}
.Image2{
background-image:url('Image2_REG.jpg');
height:86px;
width:86px;
display: block;
}
.Image2:hover {
background-image:url('Image2_Shadow.jpg');
height:86px;
width:86px;
display:block;
}
.Image3{
background-image:url('Image3_REG.jpg');
height:86px;
width:86px;
display: block;
}
.Image3:hover {
background-image:url('Image3_Shadow.jpg');
height:86px;
width:86px;
display:block;
}
#contentDiv{
height:150px;
width:350px;
left:50px;
top:150px;
position:absolute;
background-color:#452835;}
table {
width:600px;
height:auto;
column-width:200px;
left:150px;
top:150px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="newStyle.css"></link>
</head>
<body>
<body>
<table>
<tbody>
<tr><img src="header.jpg" align ="center" /></tr>
<tr>
<td><a class="Image1" href="http://link1" target="_blank"></a>
</td>
<td>
<a class="Image2" href="http://link2" target="_blank"></a>
</td>
<td><a class="Image3" href="http://link3" target="_blank"></a></td>
</tr>
</tbody>
</table>
<div id="contentDetails">Where the hover text is to be displayed</div>
</body>
</html>
你需要JavaScript的一个小一点，但什么你不能在半小时内学会。我建议你阅读MDN JS primer，但只能了解JS如何工作。
实质上，您需要找到要悬停的元素，然后在包含您的内容的页面上有多个<div>。您在要悬停的元素上添加JavaScript mouseover event，并在您向其提供的回调函数中添加JavaScript mouseover event，您告诉它隐藏所有div，然后仅显示所需的div。
我想你应该可以从这些页面摸出一切：
祝您好运与它的。如果你在编写代码时遇到困难，可以*编辑你的问题并发表评论（所以我知道去看看），我会尽力帮助你。
您可以使用悬停或点击功能检测与当时使用DIV ID /名称更改与查询我相信文字图像交互其应$("").text("Some info") 例如：
<div style="height:100px; width:100px" class="title"> //*
first text
</div>
代码你为了改变在他的类名是"title"股利文本需要（见注释“//*”以上）：
$('div.title').text('Some info');
而且有关详情请参阅“使用jQuery设置的值div标签“：
Use jquery to set value of div tag
链接：
您也可以使用@tanjir的代码，例如：
$('#img1').hover(function(){
$('#contentDiv').text("content for text 1")
};
记住
$('#img1'). hover(function(){
// CODE EXECUTE HERE AFTER HOVER OF IMAGE 1
}
***这个例子中具有＃的开始，因为他使用div的ID，而不是类名的！所以它看起来像：
<div ID="img1">
</div>
是一个侦听器，等待您悬停，当您将代码悬停在评论将执行的代码。
对不起，声音如此丢失，但我试图放入我的代码，但是，似乎有一个字符数限制。在那附近？ –
只需编辑您的问题，并将代码放在问题的末尾，并标记我的名字，如'@DeBanana' –
请记住，在您发送代码以标记它并选择{}图标 –
这里是一个非常简单的例子，我创建，这将帮助你开始：
JS小提琴： http://jsfiddle.net/dvav1gdo/5/
HTML
<div class="module">
<div class="tabs">
<div class="tab">
<img style="-webkit-user-select: none;" src="http://dummyimage.com/200x150/000/fff.jpg" width="200" height="150">
</div>
<div class="tab">
<img style="-webkit-user-select: none;" src="http://dummyimage.com/200x150/000/fff.jpg" width="200" height="150">
</div>
<div class="tab">
<img style="-webkit-user-select: none;" src="http://dummyimage.com/200x150/000/fff.jpg" width="200" height="150">
</div>
</div>
<div class="tab-panels">
<div class="tab-panel active">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit unde inventore, aliquam architecto minus minima quis. Aliquid voluptates, dolorum ullam dicta nesciunt molestiae maiores! Ratione quasi officia recusandae laboriosam nihil voluptate perferendis fugiat quae provident aliquam harum id tenetur quisquam, ab repellendus suscipit eligendi temporibus facilis sapiente a veniam voluptatibus quidem in voluptatum vero. Soluta excepturi quisquam, sed, quas rem aperiam atque obcaecati nulla repellendus corporis? Consequatur aut quidem, earum enim asperiores. Libero deserunt dignissimos blanditiis est, repellendus qui molestiae tenetur quas assumenda officiis modi totam, quae ullam. Quaerat officiis tempora molestias voluptatibus sint quo incidunt nostrum quisquam sed excepturi?</p>
</div>
</div>
<div class="tab-panel">
<div class="content">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="tab-panel">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error fugit harum voluptates. Deserunt adipisci libero incidunt nostrum similique laborum dicta, porro natus harum odit, voluptatum vitae, minima iure omnis. Odit, nemo incidunt voluptas placeat est quis ab dolor. Iure, corporis.</p>
</div>
</div>
</div>
</div>
CSS
.tab {
display: inline-block;
}
.tab-panel {
display: none;
&.active {
display: block;
}
}
jQuery的
$(document).ready(function() {
var $tabs = $('.tab');
var $panels = $('.tab-panel')
// attach js event handler to all tab jQuery objects
$tabs.on('mouseover', function() {
var $this = $(this);
// get hover index
var hindex = $this.index();
// use the active class to show and hide correct panel based on current hover index
$panels.removeClass('active');
$panels.eq(hindex).addClass('active');
});
});
请发表一点你的代码向我们展示你现在所拥有的。 –
如果您使用jquery只绑定悬停事件和'jquery $ .load'将html的内容放入div。这对你来说太容易了。 –
如果您使用的是jquery，$（'＃img1'）。 hover（function（）{$（'＃contentDiv'）。text（“content for text 1”）}; – tanjir