代码如下:
<
html
>
< head >
< title > tab控件 </ title >
< 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;
}
</ style >
< 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 =
"<table width='100%' border='0'><tr><td><div class='normal'>姓名:</div></td><td><div class='normal'><input type='text'></div></td></tr>";
tab_content.innerHTML += "<tr><td><div class='normal'>密码:</div></td><td><div class='normal'><input type='password'></div></td></tr></table>";
}else if(liname == "li_2"){
li_1.style.cssText = "background:#E0E0E0; border-bottom:1px solid gray";
tab_content.innerHTML =
"<table width='100%' border='0'><tr><td><div class='normal'>企业名:</div></td><td><div class='normal'><input type='text'></div></td></tr>";
tab_content.innerHTML += "<tr><td><div class='normal'>密码:</div></td><td><div class='normal'><input type='password'></div></td></tr></table>";
}
}
</ script >
</ head >
< body >
< div id ="tab_control" >
< ul id ="tab_tag" >
< li id ="li_1" class ="li_1" onmousedown ="javascript:showTab(this, this.className);" > 个人用户登录 </ li >
< li id ="li_2" class ="li_2" onmousedown ="javascript:showTab(this, this.className);" > 企业用户登录 </ li >
</ ul >
< div class ="tab_content" id ="tab_content" >
</ div >
</ div >
</ html >
< head >
< title > tab控件 </ title >
< 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;
}
</ style >
< 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 =
"<table width='100%' border='0'><tr><td><div class='normal'>姓名:</div></td><td><div class='normal'><input type='text'></div></td></tr>";
tab_content.innerHTML += "<tr><td><div class='normal'>密码:</div></td><td><div class='normal'><input type='password'></div></td></tr></table>";
}else if(liname == "li_2"){
li_1.style.cssText = "background:#E0E0E0; border-bottom:1px solid gray";
tab_content.innerHTML =
"<table width='100%' border='0'><tr><td><div class='normal'>企业名:</div></td><td><div class='normal'><input type='text'></div></td></tr>";
tab_content.innerHTML += "<tr><td><div class='normal'>密码:</div></td><td><div class='normal'><input type='password'></div></td></tr></table>";
}
}
</ script >
</ head >
< body >
< div id ="tab_control" >
< ul id ="tab_tag" >
< li id ="li_1" class ="li_1" onmousedown ="javascript:showTab(this, this.className);" > 个人用户登录 </ li >
< li id ="li_2" class ="li_2" onmousedown ="javascript:showTab(this, this.className);" > 企业用户登录 </ li >
</ ul >
< div class ="tab_content" id ="tab_content" >
</ 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(即<div id="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的背景色保持相同即可。