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 = 
                        "

　　注意点：

　　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；

立即学习“前端免费学习笔记（深入）”；

Midjourney

当前最火的AI绘图生成工具，可以根据文本提示生成华丽的视觉图片。

下载

　　3：tab_content（即