div+css+js打造HTML的tab控件_html/css_WEB-ITnose

　　代码如下：

< html >
< head >
< title > tab控件

< style type ="text/css" >
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;
}


< script language ="javascript" >
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 += "

企业名：
密码：

";
}
}


< body >
< div id ="tab_control" >
< ul id ="tab_tag" >
< li id ="li_1" class ="li_1" onmousedown ="javascript:showTab(this, this.className);" > 个人用户登录
< li id ="li_2" class ="li_2" onmousedown ="javascript:showTab(this, this.className);" > 企业用户登录

< div class ="tab_content" id ="tab_content" >

　　注意点：

　　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（即