爲什麼多個HTML對象對象不顯示？

我試圖從第三方網站獲取用戶控制的內容顯示。在演示設置中，鏈接的onmouseover會導致顯示對象，然後消失。爲什麼多個HTML對象對象不顯示？

該演示適用於其中一個對象，並且如果我刪除其他對象，則反過來對所有這些對象進行演示，所以我猜測這個問題是關於對象互相干擾的。

我在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>

在此先感謝。

來源

2012-08-25 user1379351

我檢查了它在螢火蟲，並意識到其他物體根本沒有被渲染。我做了一個猜測，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-25 18:31:52 Andrw

認爲這將是愚蠢的東西類似的。謝謝！ – user1379351

偉大而簡單的解決方案，謝謝：D –

爲什麼多個HTML對象對象不顯示？

回答

相關問題