在这里利用到了闭包和立即执行函数
<!DOCTYPE html>
<html lang='em'>
<head>
<meta charset="utf-8">
<title>dom初探</title>
<style type="text/css">
.content{
display: none;
width: 100px;
height: 100px;
border: 2px solid red;
}
.active {
background-color: yellow;
}
</style>
</head>
<body>
<div class = 'wrapper'>
<button class = 'active'>111</button>
<button>222</button>
<button>333</button>
<div class = 'content'>111</div>
<div class = 'content'>222</div>
<div class = 'content'>333</div>
</div>
<script type="text/javascript">
var btn = document.getElementsByTagName('button');
var div = document.getElementsByClassName('content');
for(var i = 0; i < btn.length; i++){
(function(n){
btn[n].onclick =function() {
for(var j = 0 ; j < btn.length; j++ ){
btn[j].className = '';
div[j].style.display = "none" ;
}
this.className = 'active';
div[n].style.display = 'block';
}
}(i))
}
</script>
<!--
/*var div = document.getElementsByTagName('div')[0];
div.style.width = '100px';
div.style.height = '100px';
div.style.background = 'red';
div.onclick = function () {
this.style.backgroundColor = 'green';
this.style.width = '200px';
this.style.height = '200px';
this.style.borderRadius = '50%';
}
//上面的升级版本
var count = 0;
div.onclick =function (){
count ++;
if (count % 2 == 1) {
this.style.backgroundColor = 'green' ;
}
else{
this.style.backgroundColor = 'red' ;
}
}*/
-->
</body>
</html>