div + css + js で HTML タブを作成 control_html/css_WEB-ITnose-htmlチュートリアル-php.cn

div + css + js で HTML タブを作成 control_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:29:15

オリジナル

1364 人が閲覧しました

コードは次のとおりです。

body{}{
text-align:center;
}

div.normal{}{
font-size:12px;
font-family:宋体;
}

div#tab_control{}{
位置:相対;
マージン: 0 自動;
border:1px solid lightblue;
幅:300px;
}

/**//** タブタブのスタイルを定義します*/
div#tab_control ul{}{
list-style:none;
マージン:0px 1px 0px 1px;
パディング:0px 0px 20px 0px;
line-height:0px;
border-bottom:1px solid grey;
}

div#tab_control ul li{}{
float:left;
オーバーフロー: 非表示;
display:inline-block;
色: 黒。
背景:#d0d0d0;
カーソル:ポインタ;
幅:90px;
text-align:center;
line-height:19px;
マージン:0px 1px 0px 1px;
border:1px solid grey;
パディング:0px;
font-family:宋体;
font-size:12px;

div#tab_control div.tab_content{}{
display:block ;
オーバーフロー: 非表示;
border:1px solid grey;
border-top:0px;
パディング:0px 0px 0px 0px;
マージン:0px 1px 1px 1px;
クリア: 両方;
背景:白;
}

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){
liob j.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 += "

企业名：
密码：

";
}
}

< ; 本文 >
< " >
< 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);" > < class ="tab_content" id ="tab_content" >

注意点：

1：ulのline-height は 0 に設定されますが、padding-bottom は文字表示の高さに設定されます。同時に list-style プロパティは none に設定される必要があります。

2:li の float プロパティは left に設定されます。line-height は ul のパディングに設定されなければなりません。 -bottom の高さの境界を取り除く border-bottom の高さ;padding の設定は 0;margin-top と margin-bottom の両方の設定は 0;

3：tab_content（すなわち

）のborder-top は 0 に設定され、この境界線の border-bottom の代わりに、margin-top も 0 に設定される必要があります。 : マウスポイントがliのとき、そのliの背景色、そのliのborder-bottomおよびtab_contentの背景色を同じに設定するだけで十分です。