tab 效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div {
width: 500px;
height: 300px;
position: absolute;
border: 1px solid red;
}
</style>
</head>
<body>
<button class="btn">button1</button>
<button class="btn">button2</button>
<button class="btn">button3</button>
<button class="btn">button4</button>
<div id="wrap">
<div class="div">我是第1个div</div>
<div class="div">我是第2个div</div>
<div class="div">我是第3个div</div>
<div class="div">我是第4个div</div>
</div>
</body>
<script type="text/javascript">
//获取所有的标签
var btns = document.getElementsByClassName("btn");
var divs = document.getElementsByClassName("div");
//把所有的div隐藏
for(var i = 0; i < divs.length; i++) {
divs[i].style.display = "none";
}
//给按钮添加事件，点击的显示，其他的隐藏；
for(var j = 0; j < btns.length; j++) {
/*// 下标给btns数组的属性中
btns[j].index = j;
btns[j].onmouseover = function() {
//遍历的方法，点击按钮，开始遍历图片，如果当前的下标和按钮的下标相同，则让这个图片显示，其他隐藏
for(var k =0;k<divs.length;k++){
if(k==this.index){
divs[k].style.display = "block";
}else{
divs[k].style.display = "none";
}
}
}
btns[j].onmouseout = function(){
for(var w=0;w<divs.length;w++){
divs[w].style.display = "none"
}
}*/
//第二种方式
(function(j){
btns[j].onmouseover =function(){
divs[j].style.display = "block";
}
btns[j].onmouseout =function(){
divs[j].style.display = "none";
}
})(j)
}
</script>
</html>来源： http://10.0.88.88:8083/forum.php?mod=viewthread&tid=44632
