0

目前我的代码如下所示：

<div id="content">
<div id="1">
<img src="" alt="" onmouseover="document.getElementById('1').style.visibility = 'visible'; document.getElementById('2').style.visibility = 'hidden'; document.getElementById('3').style.visibility = 'hidden'; document.getElementById('4').style.visibility = 'hidden';" />
<div id="1_content>content</div>
</div>

<div id="2">
<img src="" alt="" onmouseover="document.getElementById('2').style.visibility = 'visible'; document.getElementById('1').style.visibility = 'hidden'; document.getElementById('3').style.visibility = 'hidden'; document.getElementById('4').style.visibility = 'hidden';" />
<div id="2_content">content</p>
</div>

<div id="3">
<img src="" alt="" onmouseover="document.getElementById('3').style.visibility = 'visible'; document.getElementById('1').style.visibility = 'hidden'; document.getElementById('3').style.visibility = 'hidden'; document.getElementById('4').style.visibility = 'hidden';" />
<div id="3_content">content</div>
</div>

<div id="4">
<img src="" alt="" onmouseover="document.getElementById('4').style.visibility = 'visible'; document.getElementById('1').style.visibility = 'hidden'; document.getElementById('2').style.visibility = 'hidden'; document.getElementById('3').style.visibility = 'hidden';" />
<div id="4_content>content</div>
</div>

</div><!-- content -->

每个 div 都位于同一个位置。我将如何创建一个函数来执行此操作？我只是问，因为代码没有通过我正在使用的 DTD 验证，所以我想解决这个问题。另外，因为 div 彼此重叠，当我使一个可见时，我无法突出显示文本在可见的 div 中，因为它的 z-index 保持不变，所以内容被锁定在一个不可见的 div 后面。我将如何解决这个问题？最后，我是否可以简单地用 html 调用该函数onmouseover="return functionName()"？这在 XHTML1.0 Strict 中是否有效?

4

1 回答 1

1

我猜你需要这样的东西：

<html><head>
<script>
function makeVisible(pName) 
{
  var item = document.getElementById(pName);
  var contentPanel = document.getElementById("content");
  var contents = contentPanel.getElementsByTagName("p");

  for (var i = 0; i < contents.length; i++) {
    if (contents[i] != item) {
      contents[i].style.display = "none"
    }
  }
  item.style.display = "";
}
</script>
</head>
<body>
<div id="content">
<div><img src="" alt="" onmouseover="makeVisible('p1')" /></div>
<div><img src="" alt="" onmouseover="makeVisible('p2')" /></div>
<div><img src="" alt="" onmouseover="makeVisible('p3')" /></div>
<div><img src="" alt="" onmouseover="makeVisible('p4')" /></div>

<p id="p1">content 1</p>
<p id="p2">content 2</p>
<p id="p3">content 3</p>
<p id="p4">content 4</p>

</div><!-- content -->
</body></html>
于 2012-05-15T11:08:52.000 回答