css部分
<style>
div{
width: 220px;
height: 220px;
border: 1px solid red;
display: none;
}
.active{
display: block;
}
</style>
html部分
<button style="background-color: green">按钮One</button>
<button>按钮Two</button>
<button>按钮Three</button>
<div class="active">1111111</div>
<div>2222222</div>
<div>3333333</div>
js部分
<script>
//console.log(this);
var btn = document.getElementsByTagName("button");
var Div = document.getElementsByTagName("div");
//给每个按钮添加点击事件
for(var i = 0;i < btn.length;i++){
// 给每个按钮添加 自定义属性(理解为标记)(用于调用对应的div)
btn[i].index = i;
//点击按钮时,给当前按钮添加背景颜色
btn[i].onclick = function () {
//先清空所有的按钮颜色 和 隐藏所有div.
for(var j = 0;j < btn.length;j++){
btn[j].style.background = "";
Div[j].className = "";
}
//给当前按钮添加背景颜色 方法1 //fn(this); //方法2
this.style.background = "green";
//点击按钮时,通过 自定义属性 让对应的div显示出来
Div[this.index].className = "active";
}
}
function fn(obj) {
obj.style.background = "red";
}