点击按钮显示隐藏div
时间: 2023-09-05 20:06:46 浏览: 217
Div显示隐藏
要实现点击按钮显示隐藏div的效果,你可以使用JavaScript来操作DOM元素。以下是一种简单的方式来实现这个功能:
首先,在HTML中创建一个按钮和一个要隐藏的div元素:
```html
<button id="toggleButton">点击按钮</button>
<div id="hiddenDiv" style="display: none;">这是要隐藏的内容。</div>
```
然后,在JavaScript中监听按钮的点击事件,并根据当前div的显示状态来切换其显示与隐藏:
```javascript
var button = document.getElementById("toggleButton");
var hiddenDiv = document.getElementById("hiddenDiv");
button.addEventListener("click", function() {
if (hiddenDiv.style.display === "none") {
hiddenDiv.style.display = "block";
} else {
hiddenDiv.style.display = "none";
}
});
```
以上代码中,我们通过getElementById方法获取按钮和div元素的引用,并使用addEventListener方法为按钮添加一个点击事件监听器。在事件处理函数中,我们检查当前div的display属性值,如果是"none"(表示隐藏),则将其设置为"block"(表示显示),反之亦然。
这样,当按钮被点击时,div的显示状态就会切换,实现了点击按钮显示隐藏div的效果。
阅读全文