点击显示与隐藏
开发工具：DW
关键技术：javascript
作者：曾震宇
撰写时间：2019.1.20
通过Javascript创建点击事件来控制元素的显示与隐藏，在前端布局经常用得到
给按钮1一个点击事件，把隐藏的div显示出来。再点击按钮2把显示的div隐藏掉。
这是没有动画效果的，可以添加一些动画效果使得过渡变得更加圆润。
代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>zero</title>
</head>
<style>
.header{
width:1200px;
height: 70px;
background: #BDBCBC;
box-shadow: 2px 2px 2px #000000;
border-radius: 7px;
}
.title{
display: none;
height:1000px;
width:200px;;
background: red;
border-radius: 15px;
box-shadow: 2px 2px 2px #000000;
}
</style>
<body>
<div class="header" id="header">
<button id="btn1">按钮1</button>
</div>
<div class="title" id="title">
<button id="btn2">按钮2</button>
</div>
</body>
<script>
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
window.onload = function(){
btn1.onclick = function(){
title.style.display = "block";
};
btn2.onclick = function(){
title.style.display = "none";
};
};
</script>
</html>