您好,欢迎访问一九零五行业门户网

div + css + js 打造HTML的tab控件_html/css_WEB-ITnose

代码如下:
tab控件 title >
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 >
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 =
姓名:
;    
                    tab_content.innerhtml += 密码:
;
                }else if(liname == li_2){
                    li_1.style.csstext = background:#e0e0e0; border-bottom:1px solid gray;
tab_content.innerhtml = 
                        企业名:
;    
                    tab_content.innerhtml += 密码:
;
                }
            }
         script >
     head >
个人用户登录 li >
                 企业用户登录 li >
             ul >
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(即
)的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的背景色保持相同即可。
其它类似信息

推荐信息