CSS+JavaScript 实现TabPane页签

核心提示： tabPane.cssdiv{width:100%;height:auto;}.tab{font-family:Verdana,Helvetica,Arial;font-size:12px;position:relative;width:100%;}.tab-border{border:1

tabPane.css

div{
　　width:　　100%;
　　height:　　auto;
}
.tab{
　　font-family:　　Verdana,Helvetica,Arial;
　　font-size:　　　　12px;
　　position:　　relative;
　　width:　　　　100%;
}
.tab-border{border:1pxsolid;border-color:　　rgb(120,172,255);}
.tab-head{
　　background-color:rgb(234,242,255);;
　　border:0px;
　　height:23px;
　　line-height:20px;
　　position:relative;　　
}
.tab-headul{
　　border:0px;
　　height:23px;
　　list-style:none;　　　
　　margin:0px;　　　
　　text-align:center;
　　padding:0;
　　position:absolute;
}
.tab-headli{　　
　　border:　　1pxsolid;
　　border-color:　　rgb(120,172,255);
　　border-left:　　0;
　　border-bottom:　　0;
　　border-top:　　　　0;
　　cursor:pointer;
　　color:#416AA3;　　
　　float:left;
　　display:block;
　　height:22px;!important;height:20px;
　　line-height:20px;
　　padding:　　　　2px6px0px6px;
　　margin-top:　　2px;
　　margin-right:　　-1px;
　　text-overflow:ellipsis;
　　white-space:nowrap;
　　overflow:hidden;
}
.tab-headli.hover{
　　border:　　　　　　1pxsolidrgb(120,172,255);
　　border-bottom:　　0;
　　padding:　　　　0px6px3px6px;
　　margin:　　　　　　0px1px0px0px;
　　background:　　　　white;
　　font-size:　　　　　　13px;
　　font-weight:　　bold;
　　color:　　　　　　　　rgb(0,66,174);
　　overflow:visible;　　
}