div布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>隐藏/显示层</title>
<style type="text/css">
<!--
body{
background: #FFF;
color: #000;
margin: 0;
padding: 0;
text-align: left;
}
div,form,ul,ol,li,span,p {
border: 0;
margin: 0;
padding: 0;
}
.clear{
clear: both;
font-size: 1px;
visibility: hidden;
}
.class_title{
margin: 0 auto;
height: 17px;
border: 1px solid #9EB1C0;
padding: 1px;
}
.class_title h2{
margin: 0;
padding: 2px 0 2px 18px;
height: 12px;
font: bold 13px ;
cursor:pointer;
letter-spacing: 2px;
text-align: left;
}
#tabclass1{
background:url();
background:#66CC66;
}
#class_cnt1{
border: solid #9EB1C0;
border-width: 0 1px 1px 1px;
height: 60px;
margin: 0 auto;
text-align: left;
display: block;
overflow:hidden;
padding-left:10px;
}
#class_cnt2{
border: solid #9EB1C0;
border-width: 0 1px 1px 1px;
height: 60px;
margin: 0 auto;
text-align: left;
display: none;
overflow:hidden;
padding-left:10px;
}
#class_cnt3{
border: solid #9EB1C0;
border-width: 0 1px 1px 1px;
height: 60px;
margin: 0 auto;
text-align: left;
display: none;
overflow:hidden;
padding-left:10px;
}
#class_cnt1 p{
    margin:0;
    padding:3px;
    line-height:150%;
}
#content_admin{
border: solid #9EB1C0;
border-width: 1px 1px 1px 1px;
width: 700px;
height: 1000px;
background: #FFF;
color: #000;
margin: 0;
}
#content_top{
width: 700px;
height: 210px;
float:left;
background: #FFF;
color: #000;
}
#content_top_left{
border: solid #9EB1C0;
border-width: 1px 1px 1px 1px;
width: 200px;
height: 200px;
float:left;
background: #FFF;
color: #000;
margin: 10px 10px 10px 10px;
}
#content_top_right{
border: solid #9EB1C0;
border-width: 1px 1px 1px 1px;
width: 460px;
height: 200px;
float:left;
background: #FFF;
color: #000;
margin-top:10px;
margin-right:10px;
}
#content_bottom{
width: 700px;
height: 400px;
float : left;
background: #FFF;
color: #000;
margin-top:10px;
}
#content_bottom_left{
border: solid #9EB1C0;
border-width: 1px 1px 1px 1px;
width: 200px;
height: 400px;
float : left;
background: #FFF;
color: #000;
margin: 10px 10px 10px 10px;
}
#content_bottom_right{
border: solid #9EB1C0;
border-width: 1px 1px 1px 1px;
width: 460px;
height: 400px;
float:left;
background: #FFF;
color: #000;
margin-top:10px;
margin-right:10px;
}
#condition1{
border: solid #9EB1C0;
border-width: 1px 1px 1px 1px;
width: 100px;
height: 160px;
float:left;
background: #FFF;
color: #000;
margin-top:10px;
margin-left:10px; 
}
#condition2{
border: solid #9EB1C0;
border-width: 1px 1px 1px 1px;
width: 100px;
height: 160px;
float:left;
background: #FFF;
color: #000;
margin-top:10px;
margin-left:10px; 
}
#condition3{
border: solid #9EB1C0;
border-width: 1px 1px 1px 1px;
width: 100px;
height: 160px;
float:left;
background: #FFF;
color: #000;
margin-top:10px;
margin-left:10px; 
}
#condition4{
border: solid #9EB1C0;
border-width: 1px 1px 1px 1px;
width: 100px;
height: 160px;
float:left;
background: #FFF;
color: #000;
margin-top:10px;
margin-left:10px; 
}




-->
</style>
<script language="javascript" type="text/javascript">
<!--
function getObject(objectId) {
     if(document.getElementById && document.getElementById(objectId)) {
// W3C DOM
return document.getElementById(objectId);
     } else if (document.all && document.all(objectId)) {
// MSIE 4 DOM
return document.all(objectId);
     } else if (document.layers && document.layers[objectId]) {
// NN 4 DOM.. note: this won't find nested layers
return document.layers[objectId];
     } else {
return false;
     }
}


function displayList(class_cnt){    
       var h = getObject(class_cnt).offsetHeight;
       var max_h = 60;
      
       var anim = function(){
     h += 20; 
     if(h >= max_h){ 
             getObject(class_cnt).style.height = "60px";
             getObject('tabclass1').style.backgroundImage="url()";    
             if(tt){window.clearInterval(tt);}
     }
     else{
                 getObject(class_cnt).style.display="block";
                 getObject(class_cnt).style.height = h + "px";
     }
     }
   
   var tt = window.setInterval(anim,0.2);
}


function hiddenList(class_cnt){
        var h = getObject(class_cnt).offsetHeight;
    var anim = function(){
      h -= 50;
     
      if(h <= 5){
              getObject(class_cnt).style.display="none";
            getObject('tabclass1').style.backgroundImage="url()"; 
            if(tt){window.clearInterval(tt);}
        }
        else{
            getObject(class_cnt).style.height = h + "px";
        }
    }
     
    var tt = window.setInterval(anim,2);
}


function showClassList(){
if (getObject('radio1').checked) {
displayList("class_cnt1");
hiddenList("class_cnt2");
hiddenList("class_cnt3");
} else if (getObject('radio2').checked) {
displayList("class_cnt2");
hiddenList("class_cnt1");
hiddenList("class_cnt3");
}else if (getObject('radio3').checked) {
displayList("class_cnt3");
hiddenList("class_cnt1");
hiddenList("class_cnt2");
}

   /*if(getObject(class_cnt).style.display == "none"){ 
displayList(class_cnt);
        
    }
    else{
      hiddenList(class_cnt);
}*/
}
-->
</script>
</head>
<body>
<div id="content_admin">
<div id="content_top">
<div id="content_top_left" >
<div id = "conditon_title">conditon_title</div>
<div id= "option">
<ul id="faceul">
<li id="tabclass1" onclick="showClassList()"><input name="condition" id="radio1" type="radio" value="1" />111111</li>
<div id="class_cnt1">
<input name="test11" type="checkbox" value="1" />test111<br />
<input name="test12" type="checkbox" value="2" />test112<br />
<input name="test13" type="checkbox" value="3" />test113<br />
</div>
<li id="tabclass1" onclick="showClassList()"><input name="condition" id="radio2" type="radio" value="2" />222222</li>
<div id="class_cnt2">
<input name="test21" type="checkbox" value="1" />test211<br />
<input name="test22" type="checkbox" value="2" />test212<br />
<input name="test23" type="checkbox" value="3" />test213<br />
</div>
<li id="tabclass1"><input name="condition" type="radio" value="3" />333333</li>
<li id="tabclass1" onclick="showClassList()"><input name="condition" id="radio3" type="radio" value="4" />444444</li>
<div id="class_cnt3">
<input name="test31" type="checkbox" value="1" />test311<br />
<input name="test32" type="checkbox" value="2" />test312<br />
<input name="test33" type="checkbox" value="3" />test313<br />
</div>
</ul>
</div>

</div>
<div id="content_top_right" >
<div id="condition1">
<div id = "conditon_title">title1</div>
<div id="test1" style="width:100px; height:140px; overflow-y:auto; overflow-x:auto">
<input name="test1" type="radio" value="1" />test111<br />
<input name="test1" type="radio" value="2" />test112<br />
<input name="test1" type="radio" value="3" />test113<br />
<input name="test1" type="radio" value="1" />test111<br />
<input name="test1" type="radio" value="2" />test112<br />
<input name="test1" type="radio" value="3" />test113<br />
<input name="test1" type="radio" value="1" />test111<br />
<input name="test1" type="radio" value="2" />test112<br />
<input name="test1" type="radio" value="3" />test113<br />
</div>
</div>
<div id="condition2">
<div id = "conditon_title">title2</div>
<div id="test1"  style="width:100px; height:140px; overflow-y:auto; overflow-x:auto">
<input name="test11" type="checkbox" value="1" />test111<br />
<input name="test12" type="checkbox" value="2" />test112<br />
<input name="test13" type="checkbox" value="3" />test113<br />
</div>
</div>
<div id="condition3">
<div id = "conditon_title">title3</div>
<div id="test1"  style="width:100px; height:140px; overflow-y:auto; overflow-x:auto">
<input name="test11" type="checkbox" value="1" />test111<br />
<input name="test12" type="checkbox" value="2" />test112<br />
<input name="test13" type="checkbox" value="3" />test113<br />
</div>
</div>
<div id="condition4">
<div id = "conditon_title">title4</div>
<div id="test1"  style="width:100px; height:140px; overflow-y:auto; overflow-x:auto">
<input name="test11" type="checkbox" value="1" />test111<br />
<input name="test12" type="checkbox" value="2" />test112<br />
<input name="test13" type="checkbox" value="3" />test113<br />
</div>
</div>
</div>
</div>
<div id="content_bottom">
<div id="content_bottom_left">
<div id = "conditon_title">title_bottom</div>
<div id="bottom_test1">
<input name="test1" type="radio" value="1" />test111<br />
<input name="test1" type="radio" value="2" />test112<br />
</div>
</div>
<div id="content_bottom_right">44444</div>
</div>


</div>


</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值