<!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>
<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>