<html>
<head>
<meta charset="UTF-8">
<title>排他原理</title>
<style>
.box{width:400px;margin:100px auto;border:1px solid red; }
.bottom div{width:390px;height:400px;border:1px solid green;display:none; }
.bottom .show{display:block; } .puple{background-color:purple; }
</style>
</head>
<body>
<div class="box">
<div class="top">
<button>第一个</button>
<button>第二个</button>
<button>第三个</button>
<button>第四个</button>
<div>
<div class="bottom" id="bottom">
<div class="show">第一个</div>
<div>第二个</div>
<div>第三个</div>
<div>第四个</div>
</ div>
</ div>
</body>
</html>
<script type="text/javascript">
window.onload=function(){
var btns=document.getElementsByTagName("button");
var divs=document.getElementById("bottom").getElementsByTagName("div");
for(var i=0;ilength;i++){btns[i].index=i; //此处为难点，意思是给每一个按钮设置一个index属性
btns[i].onclick=function () {
//清空所有的按钮和div的类
for(var j=0;jlength;j++){
btns[j].className='';
divs[j].className='';
} //把当前的按钮和对应的div的class设置成对应格式
this.className="puple";
divs[this.index].className="show"; //this.index=btns[i].index 记录了当前点击按钮的索引值
}
}
}
</script>
