<html>
<head>
<title>不同颜色选项卡</title>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<styletype="text/css">
*{
margin:0;
padding:0;
}
body{
font:12px/20px'microsoftyahei','arial';
word-break:break-all;
word-wrap:break-word;
}
.clearfix:after{
content:'.';
display:block;
clear:both;
height:0;
visibility:hidden;
}
.clearfix{
display:inline-block;
}
*html.clearfix{
height:1%;
}
.clearfix{
display:block;
}
#wrap{
width:320px;
margin:2emauto;
}
.card_List{
height:30px;
border-bottom:1pxsolid#f00;
position:relative;
}
.card_Listli{
float:left;
width:68px;
text-align:center;
height:30px;
line-height:30px;
margin:05px;
display:inline;
border-top-left-radius:6px;
border-top-right-radius:6px;
}
.card_Listli.current{
height:34px;
line-height:34px;
margin-top:-4px;
border:1pxsolid#F00;
background:#FF9494;
border-bottom:none;
color:#fff;
}
#oLili:nth-child(1){
background:#FF9494;
}
#oLili:nth-child(2){
background:#8CFE8C;
}
#oLili:nth-child(3){
background:#6969FB;
}
#oLili:nth-child(4){
background:#FFE26F;
}
.card_contentdiv{
display:none;
height:100px;
text-align:center;
color:#000;
}
.card_contentdiv:first-child{
background:#fff;
}
</style>
<scripttype="text/javascript">
window.onload=function(){
varcolorArr={
0:"#f00",
1:"#0f0",
2:"#00f",
3:"#FC0"
};
varbgColorArr={
0:"#fff",
1:"#fff",
2:"#fff",
3:"#fff",
}
varoL=document.getElementById("oLi");
varoLi=oL.getElementsByTagName("li");
varoUl=document.getElementById("oUl").getElementsByTagName("div");
for(vari=0;i<oLi.length;i++){
oLi[i].index=i;
oLi[i].onclick=function(){
for(varj=0;j<oLi.length;j++){
oLi[j].className="";
oLi[j].style.border="none";
}
this.className="current";
this.style.border="1pxsolid"+colorArr[this.index];
this.style.borderBottom="none";
oL.style.borderBottom="1pxsolid"+colorArr[this.index];
for(varj=0;j<oUl.length;j++){
oUl[j].style.display="none";
oUl[this.index].style.display="block";
oUl[j].style.backgroundColor=bgColorArr[this.index];
}
};
}
};
</script>
</head>
<body>
<divid="wrap">
<ulid="oLi"class="card_Listclearfix">
<liclass="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<divid="oUl"class="card_content">
<divstyle="display:block;">
11111111111111
</div>
<div>
22222222222
</div>
<div>
3333333333333
</div>
<div>
44444444444444444
</div>
</div>
</div>
</body>
</html>
|
Copyright©2000-2022