Home
HTML
HTML
Tryit: HTML
运行 ❯
×
Change Orientation
Change Theme, Dark/Light
<!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 元素，该元素默认隐藏（显示：无）。</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>