div+css+js打造HTML的tab控件_html/css_WEB-ITnose

tab控件


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;
}



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

姓名：

查看更多关于div+css+js打造HTML的tab控件_html/css_WEB-ITnose的详细内容...