代码如下：
<html> <head> <title>tab控件</title>
<style type="text/css">
body{
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的背景色保持相同即可。