通用TAB控件，可一个页面存在多个TAB。 -

topcss

浏览: 100818 次
性别:
来自: 重庆

最近访客更多访客>>

tanghui

redheart_2006

djiepeng

morpheusfly

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (28)

社区版块

存档分类

通用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 class="tab_control">
            <ul>
            		<!-- class 关联对应的编号 -->
                <li class="li_1 selected" onmousedown="javascript:showTab(this, this.className);">个人用户登录</li>
                <li class="li_2" onmousedown="javascript:showTab(this, this.className);" >企业用户登录</li>
                <li class="li_3" onmousedown="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>

分享到：