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 回答