代码如下:
tab控件 title >
body{}{
text-align:center;
}
div.normal{}{
font-size:12px;
font-family:宋体;
}
div#tab_control{}{
position:relative;
margin:0 auto;
border:1px solid lightblue;
width:300px;
}
/**//** 定义tab选项卡的样式 */
div#tab_control ul{}{
list-style:none;
margin:0px 1px 0px 1px;
padding:0px 0px 20px 0px;
line-height:0px;
border-bottom:1px solid gray;
}
div#tab_control ul li{}{
float:left;
overflow:hidden;
display:inline-block;
color:black;
background:#d0d0d0;
cursor:pointer;
width:90px;
text-align:center;
line-height:19px;
margin:0px 1px 0px 1px;
border:1px solid gray;
padding:0px;
font-family:宋体;
font-size:12px;
}
div#tab_control div.tab_content{}{
display:block ;
overflow:hidden;
border:1px solid gray;
border-top:0px;
padding:0px 0px 0px 0px;
margin:0px 1px 1px 1px;
clear:both;
background:white;
}
style >
window.onload = function(){
if(window.document.all){
window.attachevent(onload, windowonload);
} else {
window.addeventlistener(load, windowonload(), false);
}
}
//页面加载时需要执行的方法
function windowonload(){
var li_1 = document.getelementbyid(li_1);
showtab(li_1, li_1.classname);
}
//显示标签页
function showtab(liobj, liname){
liobj.style.csstext = background:white; border-bottom:1px solid white;
var tab_content = document.getelementbyid(tab_content);
var li_1 = document.getelementbyid(li_1);
var li_2 = document.getelementbyid(li_2);
if(liname == li_1){
li_2.style.csstext = background:#e0e0e0; border-bottom:1px solid gray;
tab_content.innerhtml =
姓名:
;
tab_content.innerhtml += 密码:
;
}else if(liname == li_2){
li_1.style.csstext = background:#e0e0e0; border-bottom:1px solid gray;
tab_content.innerhtml =
企业名:
;
tab_content.innerhtml += 密码:
;
}
}
script >
head >
个人用户登录 li >
企业用户登录 li >
ul >
div >
div >
html > 注意点:
1:ul的line-height设置为0,但padding-bottom设置为文字显示的高度;同时,list-style属性必须设置为none;
2:li的float属性设置为left;line-height必须设置为ul的padding-bottom高度减去li的border-bottom的宽度;padding设置为0;margin-top与margin-bottom俱都设置为0;
3:tab_content(即
)的border-top设置为0,该边框由ul的border-bottom代替;其margin-top也需设置为0; 4:ul和tab_content的宽度或者margin-left和margin-right保持一致;
5:当鼠标点击li时,只需设置该li的背景色、该li的border-bottom和tab_content的背景色保持相同即可。