2

我正在尝试从 3rd 方网站获得用户控制的内容显示。在演示设置中，链接的 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>

提前致谢。

4

1 回答 1

2

我在萤火虫中检查了它，并意识到其他对象根本没有被渲染。我猜测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>
于 2012-08-25T18:31:52.710 回答