代码如下:
<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的背景色保持相同即可。