ホームページ > 記事 > ウェブフロントエンド > div + css + js で HTML タブを作成 control_html/css_WEB-ITnose
コードは次のとおりです。
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 =
"
姓名: | |
密码: |
企业名: | |
密码: |
2:li の float プロパティは left に設定されます。line-height は ul のパディングに設定されなければなりません。 -bottom の高さの境界を取り除く border-bottom の高さ;padding の設定は 0;margin-top と margin-bottom の両方の設定は 0;
3:tab_content(すなわち