通用TAB控件，可一个页面存在多个TAB。
直接上代码！
<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 onmousedown="javascript:showTab(this, this.className);">个人用户登录</li> <li onmousedown="javascript:showTab(this, this.className);" >企业用户登录</li> <li onmousedown="javascript:showTab(this, this.className);" >其他用户登录</li> </ul> <div style="display:none;">456</div> <div id="li_3" style="display:none;">789</div> </div> </div> </body></html>?