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的背景色保持相同即可。