javascript收缩
时间: 2023-12-15 08:33:08 浏览: 40
以下是使用JavaScript实现收缩效果的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript收缩示例</title>
<style type="text/css">
/* 初始状态下的div样式 */
.show {
background-color: #f2f2f2;
padding: 10px;
margin-bottom: 10px;
}
/* 隐藏状态下的div样式 */
.hide {
display: none;
}
/* 切换按钮样式 */
.toggle-btn {
background-color: #4CAF50;
color: white;
padding: 10px;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<!-- 初始状态下的div -->
<div class="show">
<h2>这是一个标题</h2>
<p>这是一段内容。</p>
</div>
<!-- 隐藏状态下的div -->
<div class="hide">
<h2>这是一个标题</h2>
<p>这是一段内容。</p>
</div>
<!-- 切换按钮 -->
<button class="toggle-btn" onclick="toggle()">切换</button>
<script type="text/javascript">
// 获取所有的div元素
var divs = document.getElementsByTagName("div");
// 遍历所有的div元素
for (var i = 0; i < divs.length; i++) {
// 如果当前div的class为show,则将其隐藏
if (divs[i].className == "show") {
divs[i].className = "hide";
}
// 如果当前div的class为hide,则将其显示
else if (divs[i].className == "hide") {
divs[i].className = "show";
}
}
// 切换函数
function toggle() {
// 获取所有的div元素
var divs = document.getElementsByTagName("div");
// 遍历所有的div元素
for (var i = 0; i < divs.length; i++) {
// 如果当前div的class为show,则将其隐藏
if (divs[i].className == "show") {
divs[i].className = "hide";
}
// 如果当前div的class为hide,则将其显示
else if (divs[i].className == "hide") {
divs[i].className = "show";
}
}
}
</script>
</body>
</html>
```
该示例代码中,我们首先定义了两个div元素,一个是初始状态下的div,一个是隐藏状态下的div。然后定义了一个切换按钮,点击该按钮可以切换两个div元素的显示状态。在JavaScript代码中,我们通过获取所有的div元素,并遍历这些元素,来实现切换效果。具体实现方式是,如果当前div的class为show,则将其隐藏;如果当前div的class为hide,则将其显示。