Question

我是html的初学者，在下面的代码中，我试图使用div块隐藏和显示内容。我可以隐藏/显示第二个div块但是点击第一个div块它不起作用！不知道哪里出错了。任何帮助将不胜感激。

<html>
<body>

<script type="text/javascript">
function hideshow(which)
{
    if (!document.getElementById)
return
    if (which.style.display=="block")
which.style.display="none"
    else
which.style.display="block"
 }
 </script>


 <table>
 <tr><td><a href="javascript:hideshow(document.getElementById('adiv1'))"><label class="menuOff" style="font-size: 35px;">Div block 1</label></a></td></tr>

  <div id="adiv1" style="font:24px bold; display: none;">
  <table>
  <tbody>
  <tr><td>Now you see me</td></tr>
  <tr><td>Hello</td></tr>
  </tbody>
  </table>
  </div>

  <tr><td><a href="javascript:hideshow(document.getElementById('adiv'))"><label            class="menuOff" style="font-size: 35px;">Div block 2</label></a></td></tr>


   <div id="adiv" style="font:24px bold; display: none;">
   <table>
   <tbody>
   <tr><td>Now you see me</td></tr>
   <tr><td>Hello</td></tr>
   </tbody>
   </table>
   </div>

   </table>

   </body>
   </html>

enter image description here

Answer 1

您的HTML不正确：

<table>
 <tr><td><a href="javascript:hideshow(document.getElementById('adiv1'))"><label class="menuOff" style="font-size: 35px;">Div block 1</label></a></td></tr>

 <!-- You can't have a div here -->
 <div id="adiv1" style="font:24px bold; display: none;">

你的意思是在那里有另一个表格行吗？

 <tr>
 <td>
     <div id="adiv1" style="font:24px bold; display: none;">
 </td>
 </tr>

同样的问题适用于第二个div元素

Answer 2

问题不是你的javascript而是你的HTML，它无效。你的javascript，虽然有点奇怪（你为什么检查getElementById是否存在？用它来调用函数！），没问题。

问题是你的DIV漂浮在两个TR的中间。表结构是：

<table>
  <tr> // a row
   <td></td> // one cell
  </tr> // end of a row
</table> end of table

当你在Rows之间放置东西时会发生什么是未定义的行为。例如，如果你在Chrome中检查你的DOM，你会发现你的DIV实际上是空的，并且文本（你放在另一张桌子里，我的眼睛......！）已经“逃脱”了。这就是为什么当你点击它时什么都不做：样式被更新，但它没有任何内容。

有趣的是：如果你只修复第一个DIV，第二个DIV将开始不起作用。这完全取决于浏览器如何解析您的无效HTML并且它有点随机。始终关闭您的标签，并始终确保您遵循基本结构...就像将TR放在UL而不是LI（我已经看过它。）

Answer 3

你的html的结构是：

<table> <!-- to delete -->
    <div>
        <table>
        </table>
    </div>
    <div>
        <table>
        </table>
    </div>
</table> <!-- to delete -->

这是不正确的，当你删除额外的“表”标签时，它可以正常工作

Answer 4

标签嵌套有一些错误。
这里的示例包含较少的标签两个按钮，每个隐藏/显示不同的div。

<!doctype html>
<!-- do not forget to declare type! -->
<html>
    <head>
        <title> Hide/show div</title>
        <script type="text/javascript">
            function HideShow(which)
            {
                if (which.style.display=="block")
                    which.style.display="none"
                else
                    which.style.display="block"
            }
        </script>
    </head>
    <body>

    <button onclick = 'HideShow(document.getElementById("div1"));'>Hide/Show div 1</button>
    <div id='div1' style='display:block'>This data is in div 1</div>
    <br>
    <button onclick = 'HideShow(document.getElementById("div2"));'>Hide/Show div 2</button>
    <div id='div2' style='display:block'>This data is in div 2</div>
    </body>
</html>

Answer 5

我建议你研究一下JQuery Framework提供的toggle函数。

http://api.jquery.com/toggle/

主要问题似乎是你的HTML不正确，你在表格元素中放了一个div，这使得它成为一个直接的孩子。

这将导致一个重大错误。

我为你做了一个JSFiddle示例http://jsfiddle.net/mNDN2/

HTML：

<table>
<tr>
    <td>
    <label id="blockOne" class="menuOff" style="font-size: 35px;">Div block 1</label>
    </td>
</tr>
<tr id="adiv1">
    <td>asdfasdf</td>
</tr>
</table>

JS：

$("#blockOne").on('click', function () {
    $("#adiv1").toggle();
});

CSS：

#adiv1 {
    display: none;
}

Answer 6

尝试删除a标签并在div块上添加

onclick="hideshow(document.getElementById('adiv'))"

如果它不起作用，请使用jquery。使用jquery获取元素

$("#adiv1") for example

隐藏，做

$("#adiv1").hide()

显示：

$("#adiv1").show()

在html中隐藏和显示div块

6 个答案: