Efecto:
Código:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;}
.box{
width:300px;
height:300px;
border:1px solid red;
margin: 10px auto;
position: relative;
}
.tab li{
float:left;
width:98px;
border:1px solid yellowgreen;
height:35px;
text-align: center;
line-height: 35px;
background-color: greenyellow;
cursor:pointer;
}
.tablist{
position: absolute;
left:0;
top:37px;
width:100%;
height:263px;
font-size: 60px;
text-align: center;
display: none;
}
.hot{
color:#fff;
}
</style>
</head>
<body>
<div class="box">
<ul class="tab">
<li class="hot">菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
</ul>
<div class="tablist" style="background-color: pink;">一</div>
<div class="tablist" style="background-color: aqua;">二</div>
<div class="tablist" style="background-color: deepskyblue;">三</div>
</div>
<script>
var li=document.getElementsByTagName("li");
var list=document.getElementsByClassName("tablist");
list[0].style.display="block"
for(var i=0;i<li.length;i++){
//保存下标
li[i].index=i;
li[i].onclick=function(){
for(j=0;j<li.length;j++){
li[j].className="";
list[j].style.display="none";
}
list[this.index].style.display="block";
this.className="hot";
}
}
</script>
</body>
</html>