加载文件并将其显示在悬停 jQUERY 的窗口上

Question

这是我想要做的：

两列，一列是文章（链接）列表，右侧是一个窗口。

每个链接都指向它自己的页面，所以我想看看它是否可以在文章右侧的窗口中显示几行，以提供一个想法。

理想情况下，当用户将鼠标悬停在链接上时，javascript/jQuery 将查找文件并显示它。

现在我的链接可以正常工作，悬停时它们会显示我已经在页面本身中设置的任何文本。所以鼠标悬停的节目有效，我只需要知道是否有办法在悬停期间动态加载内容。

我在论坛和电子邮件中看到过类似的做法，它们以工具提示的形式显示链接的内容。

更多信息，文章是同一页，每篇文章都有自己的文件，通过'/?id=C1'和php粘贴到其中。

这是我现在的工作： 链接：

<a onMouseOver="changeText('La canción verde', 'C1.php')" 
href="?id=C1" alt="La canción verde" title="La canción verde" >
1. La canción verde</a>

FUNCTION，blurb 出现的 div 是“descripciondecuentos”：

<script>
function changeText(msg, documento)
{ document.getElementById("descripciondecuentos").innerHTML=msg; }
</script>

完美的世界，这个函数会对“documento”做一些事情并改变“descripciondecuentos”。不确定在页面加载期间加载所有这些文件是否明智，因为这只会使页面膨胀。

Answer 1

您可能想查看 jQuery 的 load() 函数。

例如：

$("a.fetchContent").hover(function() {
    var newLoadedHtml = $(this).attr("href");

    $("#sectionContainer").fadeOut("fast")
        .load(newLoadedHtml + " #content")
        .fadeIn("slow");
});

和你的 HTML：

<ul>
<li>
  <a class="fetchContent"  href="includes/Pages1.html" title="Pages 1">Pages 1</a>
</li>
<li>
  <a class="fetchContent"  href="includes/Pages2.html" title="Pages 2">Pages 2</a>
</li>
<li>
  <a class="fetchContent"  href="includes/Pages3.html" title="Pages 3">Pages 3</a>
</li>
<li>
  <a class="fetchContent"  href="includes/Pages4.html" title="Pages 4">Pages 4</a>
</li>
</ul>

链接的 href 应该是 HTML 文件（或 php 文件）的相对路径，例如：includes/Pages1.html。加载功能允许您只加载您正在调用的页面的一部分 (+ " #content")。

Answer 2

您可以像这样在链接上使用 jquery 的鼠标悬停功能：

$('#link').mouseover(function() {
});

要动态加载内容，您可以在该函数中使用 ajax。

$.ajax({
  url: "Your text Url"
}).done(function ( data ) {
  display the data
});

更多关于 ajax 的信息：http://api.jquery.com/jQuery.ajax/