Question

我最近开始学习Javascript语言，但我已经遇到了麻烦。我想要做的是用鼠标悬停显示另一个页面的div内容（在同一个域但不同的文件夹）。我设法得到两个脚本。第一个脚本适合显示div，但只显示不同的div在同一页面中。以下是它的两个部分（首先是Javascript，第二部分是html）：

http://pastebin.com/sHbh7jhn

<a onmouseover="ShowContent('ContentName'); return true;"
onmouseout="HideContent('ContentName'); return true;"
href="javascript:ShowContent('ContentName')">
<img style="float:right; src="somesource.png"/>
</a>

<div id="ContentName" style="display:none;">
Content goes here.
</div>

我也看到这个（第二个）完全不同的代码也可以工作，甚至可以显示不同页面的div。此代码的问题是在页面加载时立即显示，不会悬停在任何内容上等等。

jQuery(function($){
$('#mydiv').load('ContentName');
});

我在这里搜索了答案，但我在这里或其他任何地方都找不到答案。我应该如何编辑代码（第一个或第二个），以便鼠标悬停（在div上）我可以看到其他页面的div（如果可能的话，如何组合这两个代码）？

因为我是新手，所以可能会遗漏一些东西。

Answer 1

请参阅jQuery.load() API

简而言之，你可以做到

$（“＃myDiv”）。load（“/ mistath / some.html #someDivId”）;

然而，解决这个问题的干净方法是将#someFicId的内容保存在一个单独的片段文件中，并确保它具有严格的HTML / CSS

$（“＃myDiv”）。load（“/ mistath / someFragment.frag.html”）;

Answer 2

将网址内容加载到某个隐藏的div

jQuery(function ($) {
    $('#hidden_div_id').load("http://...");
});

将悬停事件添加到您的div

$("#mydiv").mouseover(function () {
   document.getElementById("mydiv").innerHTML = document.getElementById("loaded div id").innerHTML;
});

在mouseover事件内部编写你的函数，选择一些特定的div内容并将其插入你的div。这可能是解决方案。

但最好的解决方案是创建特殊的div，它只包含所需的数据并将其包含在鼠标悬停中。

将鼠标悬停在索引页面中的元素上时显示不同页面的div

2 个答案: