将内容加载到 div [关闭]答案

【问题标题】：Loading content into a div [closed]将内容加载到 div [关闭]
【发布时间】：2015-11-24 20:21:04
【问题描述】：

我正在尝试创建一个带有图像的页面，当用户悬停时将内容加载到同一页面上的 div 中。到目前为止，我已经创建了 html 文件和样式表。这是一个相当简单的基于表格的页面，其中包含三个具有 css 悬停效果的图像并链接到三个不同的页面。我的挑战是弄清楚如何将内容加载到 div 中。我对 Javascript 完全陌生，所以这将是我想象的学习曲线，但任何帮助将不胜感激。我附上了一张图片来说明我正在尝试做的事情。谢谢大家]1

更新的问题。谢谢大家的意见。（从假期回来 - 将审查建议）

我的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>

【问题讨论】：

请发布一些您的代码，向我们展示您现在拥有的内容。
如果您使用 jquery 只需绑定悬停事件和jquery $.load 将 html 的内容放入 div 中。这对你来说太容易了。
如果你使用 jquery，$('#img1'). hover(function(){$('#contentDiv').text("文本 1 的内容")};
^ 至少发布您的 html 以便我们做出假设和建议
我已经用我现有的代码编辑了我的评论。很抱歉在没有我的代码的情况下匆忙发布我的问题。谢谢大家的帮助。

标签： javascript jquery html css

【解决方案1】：

您将需要一点 JavaScript，但没有什么是半小时内学不到的。我建议您阅读MDN JS primer，但只是为了了解 JS 的工作原理。

本质上，您需要找到要悬停的元素，然后在包含您的内容的页面上有多个<div>s。您在要悬停的元素上添加JavaScript mouseover event，并在提供给它的回调函数中告诉它隐藏所有div，然后只显示您想要的div。

我认为您应该能够从这些页面中解决所有问题：

祝你好运。如果您在编写了一些代码后遇到困难，请随时编辑您的问题并对我的问题发表评论（所以我知道看看），我会尽力帮助您。

【讨论】：

【解决方案2】：

这是我创建的一个非常基本的示例，可以帮助您入门：

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');
    });
});

【讨论】：

【解决方案3】：

您可以使用悬停或单击功能来检测与图像的交互，然后使用 div id/name 来更改带有查询的文本，我相信它应该是 $("").text("Some info") 示例：

<div style="height:100px; width:100px" class="title"> //*
    first text
</div>

更改类名为"title" 的div 中的文本所需的代码（参见上面的注释“//*”）：

$('div.title').text('Some info');

更多信息请参见“使用 jquery 设置 div 标签的值”：

Use jquery to set value of div tag

链接：

http://api.jquery.com/text/

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

http://api.jquery.com/click/

您也可以使用@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'
记得在发送代码之前标记它并选择{}图标