首页编写一个页面第一行2个按钮，第二行一个画布，第三行一个div标签，2个按钮分别控制第二行和第三行的显示和隐藏

编写一个页面第一行2个按钮，第二行一个画布，第三行一个div标签，2个按钮分别控制第二行和第三行的显示和隐藏

时间: 2023-11-22 19:56:24 浏览: 77

以下是一个简单的HTML页面，实现了你所描述的功能： ```html <!DOCTYPE html> <html> <head> <title>显示/隐藏</title> <style> #canvas, #div { display: none; } </style> </head> <body> <button id="btn-canvas">显示/隐藏画布</button> <button id="btn-div">显示/隐藏DIV</button> <canvas id="canvas"></canvas> <div id="div">这是一个DIV标签</div> <script> const btnCanvas = document.getElementById("btn-canvas"); const btnDiv = document.getElementById("btn-div"); const canvas = document.getElementById("canvas"); const div = document.getElementById("div"); btnCanvas.addEventListener("click", () => { if(canvas.style.display === "none") { canvas.style.display = "block"; } else { canvas.style.display = "none"; } }); btnDiv.addEventListener("click", () => { if(div.style.display === "none") { div.style.display = "block"; } else { div.style.display = "none"; } }); </script> </body> </html> ``` 当点击第一个按钮时，会控制第二行的画布显示或隐藏；当点击第二个按钮时，会控制第三行的DIV标签显示或隐藏。

阅读全文