0

这是我正在尝试做的事情：

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

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

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

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

我在论坛和电子邮件中以工具提示的形式看到了类似的事情，这些工具提示显示了链接的内容。

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

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

<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”。不确定在页面加载期间加载所有这些文件是否明智，因为这只会使页面膨胀。

4

2 回答 2

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. load 函数允许您只加载您正在调用的页面的一部分 ( + " #content")。

于 2012-07-01T08:26:38.713 回答
0

您可以在链接上使用 jquery 的鼠标悬停功能，如下所示：

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

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

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

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

于 2012-07-01T08:28:08.553 回答