W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!DOCTYPE html> <html> <head> <style> #panel, .flip { font-size: 16px; padding: 10px; text-align: center; background-color: #4CAF50; color: white; border: solid 1px #a6d8a8; margin: auto; } #panel { display: none; } </style> </head> <body> <p class="flip" onclick="myFunction()">点击这里来显示面板</p> <div id="panel"> <p>该面板包含一个 div 元素，默认情况下该元素是隐藏的（display: none）。</p> <p>它使用 CSS 进行样式设置，我们使用 JavaScript 来显示它（display: block）。</p> <p>工作原理：请注意，带有 class="flip" 的 p 元素有 onclick 属性。当用户单击 p 元素时，将执行一个名为 myFunction() 的函数，该函数将 id="panel" 的 div 样式从 display:none（隐藏）更改为 display:block（可见）。</p> <p>您将在我们的 JavaScript 教程中学到有关 JavaScript 的更多知识。</p> </div> <script> function myFunction() { document.getElementById("panel").style.display = "block"; } </script> </body> </html>