原理
“干掉所有人，留下我自己”
上代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 360px;
height: 200px;
border: 1px solid #ccc;
margin: 100px auto;
padding: 5px;
}
.btn{
/*添加父标签除button间距*/
font-size: 0;
}
.btn .current{
background-color: cornflowerblue;
}
button{
width: 90px;
height: 25px;
}
.con{
height: 175px;
background-color: lightpink;
text-align: center;
line-height: 175px;
font-size: 30px;
display: none;
}
#content .co{
display: block;
}
</style>
<script>
window.function(){
var box=document.getElementById("box");
var btn=document.getElementById("btn");
var btns=document.getElementsByTagName("button");
var content=document.getElementById("content");
var divs=content.getElementsByTagName("div");
for(var i=0;i<btns.length;i++){
btns[i].index=i;//给每个按钮添加一个自定义属性，用来存储当前的索引
btns[i].onmouseover=function(){
for(var j=0;j<btns.length;j++){
btns[j].className="";
divs[j].style.display="none";
}
this.className="current";
divs[this.index].style.display ="block";
}
}
}
</script>
</head>
<body>
<div class="box" id="box">
<div class="btn" id="btn">
<button class="current">按钮01</button>
<button>按钮02</button>
<button>按钮03</button>
<button>按钮04</button>
</div>
<div id="content">
<div class="con co">内容1</div>
<div class="con">内容2</div>
<div class="con">内容3</div>
<div class="con">内容4</div>
</div>
</div>
</body>
</html>
528
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
