直接上代碼！
<html>
<head>
<title>tab控件</title>
<style type="text/css">
div.tab_control{
position:relative;
margin:0 auto;
width:300px;
}
/** 定義tab選項卡的樣式 */
div.tab_control ul{
list-style:none;
margin:0px 1px;
padding:0px 0px 20px 0px;
line-height:0px;
border-bottom:1px solid #8db2e3;
}
div.tab_control ul li{
float:left;
overflow:hidden;
display:inline-block;
color:black;
background:#e4edf3;
cursor:pointer;
width:90px;
text-align:center;
line-height:19px;
margin:0px 1px 0px 1px;
border:1px solid #8db2e3;
padding:0px;
font-family:宋體;
font-size:12px;
}
div.tab_control ul li.selected {
background:white;
border-bottom:1px solid white;
}
div.tab_control div.tab_content{
display:block ;
overflow:hidden;
border:1px solid #8db2e3;
border-top:0px;
padding:0px;
margin:0px 1px 1px 1px;
clear:both;
background:white;
}
</style>
<script language="javascript">
//顯示標籤頁
function showTab(liobj, liname) {
if (liname.indexOf(' selected') !== -1) return; // 沒有改變選項
var tag = liobj.parentNode.childNodes;
for (var i = 0; i < tag.length; i++) {
var item = tag[i];
if (item.nodeType === 1) {
if (item.className.indexOf(' selected') !== -1) {
item.className = item.className.replace(' selected', '');
document.getElementById(item.className).style.display = 'none';
}
}
}
document.getElementById(liname).style.display = 'block';
liobj.className += ' selected';
}
</script>
</head>
<body>
<div class="tab_control">
<ul>
<!-- class 關聯對應的編號 -->
<li class="li_1 selected" οnmοusedοwn="javascript:showTab(this, this.className);">個人用戶登錄</li>
<li class="li_2" οnmοusedοwn="javascript:showTab(this, this.className);" >企業用戶登錄</li>
<li class="li_3" οnmοusedοwn="javascript:showTab(this, this.className);" >其他用戶登錄</li>
</ul>
<div class="tab_content">
<div id="li_1">123</div>
<div id="li_2" style="display:none;">456</div>
<div id="li_3" style="display:none;">789</div>
</div>
</div>
</body>
</html>