div css js creates HTML tab control_html/css_WEB-ITnose-HTML Tutorial-php.cn

div css js creates HTML tab control_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:29:15

Original

1323 people have browsed it

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