Javascript CSS 选项卡效果的menu-白红宇

Javascript CSS 选项卡效果的menu

阅读量：6235 次

发布时间：2019-06-22

本文共 1400 字，大约阅读时间需要 4 分钟。

#card{
margin:0 auto;
width:252px;
}
 
#title{
background:green;
width:252px;
height:25px;
}
 
#title ul{
padding:0px;
margin:0px;
}
 
#title li{
width:80px;
line-height:25px;
color:white;
font-size:12px;
float:left;
list-style-type:none;
border:2px solid white;
text-align:center;
}
 
#title .titin{
background:gray;
border-color:gray;
}
 
#content{
width:252px;
height:150px;
background:gray;
color:white;
}
 
#content div{
display:none;
text-align:center;
}
 
#content .one{
display:block;
}
 
第一项
第二项
第三项
aaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbbbbbbb
ccccccccccccccccccccc
ccccccccccccccccccccc
ccccccccccccccccccccc
ccccccccccccccccccccc
ccccccccccccccccccccc
ccccccccccccccccccccc
ccccccccccccccccccccc
ccccccccccccccccccccc
 
var titles = document.getElementById("title").getElementsByTagName("li");
var contents = document.getElementById("content").getElementsByTagName("div");
function show(num){
for(var i=0;i
if(i==num){
titles[i].className="titin";
contents[i].className="one";
}else{
titles[i].className="";
contents[i].className="";
}
}
}