Question

目前我的代码如下：

<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后面。我将如何解决这个问题？最后，我是否只需使用onmouseover="return functionName()"调用html中的函数？是否会验证在XHTML1.0严格？

Answer 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>

Javascript函数可以更改图像的div可见性

1 个答案: