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，模糊出现的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/

加载文件并在悬停jQUERY上的窗口中显示它

2 个答案: