思路:
分别有四个button和四个div。
button为事件调用者,每次事件发生后,记录当前索引值
通过button索引值控制其对应的div。
用到的知识点:dom,函数,this关键字,if、else语句
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
window.onload = function() { //预加载页面
var btn = document.getElementsByTagName('button');
var divs = document.getElementsByTagName('div');
for(var i = 0; i < btn.length; i++) { //把每一个button都遍历一遍
btn[i].index = i; //给按钮排序
divs[i].style.display = 'none';
btn[i].onclick = function() {
index = this.index; // 记录当前被点击对象的角标,把当前事件的调用者'btn'的角标赋值给变量'index'.
// alert(index);
if(btn[index].innerHTML == '关闭窗口' + (index + 1)) { //如果当前按钮的内容是 ‘关闭’,点击后变为‘打开’
btn[index].innerHTML = '打开窗口' + (index + 1);
} else {
btn[index].innerHTML = '关闭窗口' + (index + 1); //否则 当前按钮的内容一定是‘打开’,点击后变为‘关闭’
}
if(divs[index].style.display == 'none') { //如果当前box是显示状态,点击后隐藏它。
divs[index].style.display = 'block';
} else {
divs[index].style.display = 'none'; //如果当前box是隐藏状态,点击后显示它。
}
}
}
}
</script>
<button>打开窗口1</button>
<button>打开窗口2</button>
<button>打开窗口3</button>
<button>打开窗口4</button>
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
<div id="box4">4</div>
<style type="text/css">
div {
line-height: 100px;
text-align: center;
width: 325px;
height: 100px;
background: palegoldenrod;
border: 1px solid cornflowerblue;
}
#box1 {
background: darkgoldenrod;
}
#box2 {
background: cornflowerblue;
}
#box3 {
background: crimson;
}
#box3 {
background: darkgray;
}
</style>
</body>
</html>