单击Div使另一个Div出现

问题描述：

我想提出一个提示框，其中您单击一个div和另一个从可见性=隐藏到可见性=可见的转换。这是我的代码到目前为止，我不知道为什么它不工作。单击Div使另一个Div出现

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width"> 
     <meta name="description" content=""> 
     <meta name="keywords" content=""> 
     <meta name="author" content="C.K."> 
     <title></title> 
     <link rel="stylesheet" href="./css/main.css"> 
     <script type="text/js"> 
      document.getElementById("addpanel").onclick = document.getElementById("selector").style.visibility = "visble"; 
     </script> 
    </head> 
    <body> 
     <div id="selector"> 
      SELECTOR 
     </div> 
     <div id="addpanel"> 
      <table id="add"> 
       <tr> 
        <td id="plus">+</td> 
       </tr> 
       <tr> 
        <td>Add New Item</td> 
       </tr> 
      </table> 
     </div> 
    </body> 
</html>

你附加处理的JS运行时不存在的元素。 –

答

检查了这一点：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width"> 
     <meta name="description" content=""> 
     <meta name="keywords" content=""> 
     <meta name="author" content="C.K."> 
     <title></title> 
    <link rel="stylesheet" href="./css/main.css"> 
</head> 
<body> 
    <div id="selector"> 
     SELECTOR 
    </div> 
    <div id="addpanel"> 
     <table id="add"> 
      <tr> 
       <td id="plus">+</td> 
      </tr> 
      <tr> 
       <td>Add New Item</td> 
      </tr> 
     </table> 
    </div> 
    <script type="text/javascript"> 
    document.getElementById("selector").style.visibility = "hidden"; 
    document.getElementById("addpanel").onclick = function(){document.getElementById("selector").style.visibility = "visible";}; 
    </script> 
</body>

这很好用！我可以问一下这种方法背后的理由吗？ – cobo16

1st - 脚本始终位于HTML之后，因此可以找到元素。 2nd - 您将onclick属性设置为javascript函数，因此它将实际执行该语句。我认为就是这样。 –

答

HTML从上到下被解析。您的脚本将立即运行，以防万一它为解析器生成更多HTML来处理（例如，使用document.write）。在document.getElementById("addpanel").onclick处，addpanel不存在，因为HTML解析器尚未达到它。

将您的<script>块移到您的apppanel元素的结束标记之后。

此外，onclick需要是一个功能。因此，这将是：

document.getElementById("addpanel").onclick = function() { 
    document.getElementById("selector").style.visibility = "visible" 
}

快速工作示例：https://jsfiddle.net/m2q6ubuv/

typo'visble' .... – ewwink

我做了那些编辑，但它仍然没有响应 – cobo16

@ewwink哈哈我刚刚从问题中复制它，谢谢！ –

答

试试这个

功能显示（）{ document.getElmenetById（ '选择'）style.visibility =“可见。 “; }

然后只是把onclick='show()'如你想成为的按钮标签的属性。另外，您应该将JavaScript放在页面的末尾，即</body>标记的第一个。

小提琴记住：这会让你显示div，但是那个按钮不会再隐藏div ，为此你必须使用更复杂的if/else JavaScript函数 – 2017-07-18 01:36:03

单击Div使另一个Div出现

相关推荐