Question

我正在尝试从第三方网站获取用户控制的内容显示。在演示设置中，链接的onmouseover导致显示一个对象，然后在onmouseout上消失。

该示例适用于其中一个对象，如果我删除其他对象，则依次为所有对象工作，所以我猜测问题是关于对象互相干扰。

我猜了z-index，但这似乎不起作用。

这是演示文件：

<!DOCTYPE html>
<html>
<head>
<title>On mouseover show object</title>
<script>
function toggleDiv(id, flagit)
{
if (flagit === 1){
document.getElementById("demo").innerHTML="Over";
document.getElementById(id).style.visibility = "visible";
document.getElementById(id).style.zIndex=1;
}
else {
document.getElementById("demo").innerHTML="Not over";
document.getElementById(id).style.visibility = "hidden";
document.getElementById(id).style.zIndex=-1;
}
}
</script>
<style type="text/css">
#div1, #div2, #div3 {visibility:hidden; position:absolute; width:400px;}
#div2 {left:400px;}
#div3 {left:800px;}

</style>
</head>

<body>
<a href="#" onMouseOver="toggleDiv('div1',1)" onMouseOut="toggleDiv('div1',0)">Link 1</a> |
<a href="#" onMouseOver="toggleDiv('div2',1)" onMouseOut="toggleDiv('div2',0)">Link 2</a> |
<a href="#" onMouseOver="toggleDiv('div3',1)" onMouseOut="toggleDiv('div3',0)">Link 3</a>
<h1>My Web Page</h1>

<p id="demo">A Paragraph.</p>


<object id="div1" type="text/html" data="http://en.m.wikipedia.org/wiki/Woodworking" />
<object id="div2" type="text/html" data="http://en.m.wikipedia.org/wiki/Ironwork" />
<object id="div3" type="text/html" data="http://en.m.wikipedia.org/wiki/Stonemasonry" />

</body>
</html>

提前致谢。

Answer 1

我在萤火虫中检查了它，并意识到其他物体根本没有被渲染。我猜测object代码需要关闭</object>

以下修正的代码：

<!DOCTYPE html>
<html>
<head>
<title>On mouseover show object</title>
<script>
function toggleDiv(id, flagit)
{
if (flagit === 1){
document.getElementById("demo").innerHTML="Over";
document.getElementById(id).style.visibility = "visible";
document.getElementById(id).style.zIndex=1;
}
else {
document.getElementById("demo").innerHTML="Not over";
document.getElementById(id).style.visibility = "hidden";
document.getElementById(id).style.zIndex=-1;
}
}
</script>
<style type="text/css">
#div1, #div2, #div3 {visibility:hidden; position:absolute; width:400px;}
#div2 {left:400px;}
#div3 {left:800px;}

</style>
</head>

<body>
<a href="#" onMouseOver="toggleDiv('div1',1)" onMouseOut="toggleDiv('div1',0)">Link 1</a> |
<a href="#" onMouseOver="toggleDiv('div2',1)" onMouseOut="toggleDiv('div2',0)">Link 2</a> |
<a href="#" onMouseOver="toggleDiv('div3',1)" onMouseOut="toggleDiv('div3',0)">Link 3</a>
<h1>My Web Page</h1>

<p id="demo">A Paragraph.</p>


<object id="div1" type="text/html" data="http://en.m.wikipedia.org/wiki/Woodworking" > </object>
<object id="div2" type="text/html" data="http://en.m.wikipedia.org/wiki/Ironwork" /> </object>
<object id="div3" type="text/html" data="http://en.m.wikipedia.org/wiki/Stonemasonry" /> </object>

</body>
</html>

为什么多个HTML对象没有显示？

1 个答案: