div css js creates HTML tab control_html/css_WEB-ITnose

The code is as follows:

< html >
     < head >
         < title > tab控件

         < style  type ="text/css" >
            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;
            }

            /**//** Define the style of the tab 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;
            }
        
        
         < script  language ="javascript" >
            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 += "

企业名：
密码：

";
                }
            }
        
    
     < body >
         < div  id ="tab_control" >
             < ul  id ="tab_tag" >
                 < li  id ="li_1"  class ="li_1"  onmousedown ="javascript:showTab(this, this.className);"   > 个人用户登录
                 < li  id ="li_2"  class ="li_2"  onmousedown ="javascript:showTab(this, this.className);"   > 企业用户登录
            
             < div  class ="tab_content"  id ="tab_content" >
                
            
        

　　注意点：

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn