直接上代码！
<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>
1442
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
