点击按钮显示或隐藏Div块不用jquery
时间: 2024-09-28 18:16:39 浏览: 56
Jquery 点击按钮显示和隐藏层的代码
要实现点击按钮显示或隐藏Div块的功能,但不使用jQuery,可以利用JavaScript的原生DOM操作。下面是一个简单的示例:
HTML部分:
```html
<button id="toggleButton">点击切换</button>
<div id="content" style="display:none;">这是Div内容</div>
```
JavaScript部分:
```javascript
document.getElementById("toggleButton").addEventListener("click", function() {
var content = document.getElementById("content");
if (content.style.display === "none") {
// 显示Div
content.style.display = "block";
} else {
// 隐藏Div
content.style.display = "none";
}
});
```
在这个例子中,我们给按钮添加了一个点击事件监听器,当点击按钮时,会检查`content` Div的样式属性。如果它的`display`值是`none`,则设置为`block`来显示;如果是`block`,则设置回`none`以隐藏。
阅读全文