<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.content{
display: none;
width: 200px;
height: 200px;
border: 2px solid red;
}
.active{
}
</style>
</head>
<body>
<button>1</button>
<button>2</button>
<button>3</button>
<div class="warpper">
<div class="content" >hehe</div>
<div class="content">haha</div>
<div class="content">heihei</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[i].onclick = function () {
for(var j=0;j<div.length;j++){
btn[j].className="";//使全部按钮的样式为空
div[j].style.display="none";
}
this.className="active";//给当前按钮设置一个active样式
div[n].style.display="block";
}
}(i))
}
</script>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
