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が互いに重なっているため、1つを表示すると、テキストを強調表示できません。 z-indexが同じままで、コンテンツが非表示のdivの背後にロックされているため、表示されている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 に答える