1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> 2 <html xmlns="http://www.111cn.net/1999/xhtml"> 3 <style type="text/css"> 4 body{ 5 margin:10px; 6 padding:10px; 7 } 8 a:link { text-decoration: none;color: blue} 9 a:active { text-decoration:blink} 10 a:hover { text-decoration:underline;color: red} 11 a:visited { text-decoration: none;color: green} 12 body,td,div,span,li{ 13 font-size:12px; 14 } 15 .title01,.title02{ 16 color:#00b; 17 font-weight:bold; 18 } 19 #DoorP{ 20 200px; 21 height:300px; 22 padding:0px; 23 background:#FFFCF2; 24 } 25 .title01{ 26 100%; 27 height:25px; 28 background:#FFFCF2; 29 cursor:pointer; 30 } 31 .title02{ 32 100%; 33 height:25px; 34 background:#FFFCF2; 35 cursor:pointer; 36 } 37 .content{ 38 background:#FFFCF2; 39 border-bottom:2px solid #fff; 40 overflow:hidden; 41 color:#666; 42 padding-left:4px; 43 padding-right:4px; 44 line-height:18px; 45 } 46 .curved { 47 202px; 48 } 49 .curved .b1, .curved .b2, .curved .b3, .curved .b4 { 50 font-size:1px; 51 display:block; 52 background:#FFFCF2; 53 overflow: hidden; 54 } 55 .curved .b1, .curved .b2, .curved .b3 { 56 height:1px; 57 } 58 .curved .b2, .curved .b3, .curved .b4 { 59 background:#FFFCF2; 60 border-left:1px solid #C7BC98; 61 border-right:1px solid #C7BC98; 62 } 63 .curved .b1 { 64 margin:0 4px; 65 background:#C7BC98; 66 } 67 .curved .b2 { 68 margin:0 2px; 69 border-0 2px; 70 } 71 .curved .b3 { 72 margin:0 1px; 73 } 74 .curved .b4 { 75 height:2px; 76 margin:0; 77 } 78 .curved .c1 { 79 margin:0 5px; 80 background:#C7BC98; 81 } 82 .curved .c2 { 83 margin:0 3px; 84 border-0 2px; 85 } 86 .curved .c3 { 87 margin:0 2px; 88 } 89 .curved .c4 { 90 height:2px; 91 margin: 0 1px; 92 } 93 .curved .boxcontent { 94 display:block; 95 background:transparent; 96 border-left:1px solid #C7BC98; 97 border-right:1px solid #C7BC98; 98 font-size:0.9em; 99 text-align:justify; 100 } 101 </style> 102 <div class="curved"> 103 <b class="b1 c1"></b> 104 <b class="b2 c2"></b> 105 <b class="b3 c3"></b> 106 <b class="b4 c4"></b> 107 <div class="boxcontent"> 108 <div id="DoorP"> 109 <table> 110 <tr> 111 <td align="center"> 112 第一层信息 113 </td> 114 </tr> 115 </table> 116 <div class="content" align="center"> 117 <a href="#">二层</a><br/> 118 二层<br/> 119 二层<br/> 120 </div> 121 <b class="b1"></b> 122 <b class="b2"></b> 123 <b class="b3"></b> 124 <b class="b4"></b> 125 126 <table> 127 <tr> 128 <td align="center"> 129 第二层信息 130 </td> 131 </tr> 132 </table> 133 <div class="content" align="center"> 134 <a href="#">二层</a><br/> 135 二层<br/> 136 二层<br/> 137 </div> 138 139 <b class="b1"></b> 140 <b class="b2"></b> 141 <b class="b3"></b> 142 <b class="b4"></b> 143 144 <table> 145 <tr> 146 <td align="center"> 147 第三层信息 148 </td> 149 </tr> 150 </table> 151 <div class="content" align="center"> 152 <a href="#">二层</a><br/> 153 二层<br/> 154 二层<br/> 155 </div> 156 </div></div> 157 <b class="b4 c4"></b> 158 <b class="b3 c3"></b> 159 <b class="b2 c2"></b> 160 <b class="b1 c1"></b> 161 <script type="text/javascript"> 162 var open = 2; 163 var openState = new Array(); 164 var closeState = new Array(); 165 var dH = 220; 166 function $(id){ 167 if(document.getElementById(id)) 168 { 169 return document.getElementById(id); 170 } 171 else 172 { 173 alert("没有找到!"); 174 } 175 } 176 function $tag(id,tagName){ 177 return $(id).getElementsByTagName(tagName) 178 } 179 function closeMe(Cid,Oid){ 180 var h = parseInt(Ds[Cid].style.height); 181 //alert(h); 182 if(h > 2) 183 { 184 h = h - Math.ceil(h/3); 185 Ds[Cid].style.height = h+"px"; 186 } 187 else 188 { 189 190 openMe(Oid); 191 clearTimeout(closeState[Cid]); 192 return false; 193 } 194 closeState[Cid] = setTimeout("closeMe("+Cid+","+Oid+")"); 195 } 196 function openMe(Oid){ 197 var h = parseInt(Ds[Oid].style.height); 198 //alert(h); 199 if(h < dH) 200 { 201 h = h + Math.ceil((dH-h)/3); 202 Ds[Oid].style.height = h+"px"; 203 } 204 else 205 { 206 clearTimeout(openState[Oid]); 207 return false; 208 } 209 openState[Oid] = setTimeout("openMe("+Oid+")"); 210 } 211 var Ds = $tag("DoorP","div"); 212 var Ts = $tag("DoorP","table"); 213 if(Ds.length != Ts.length) 214 { 215 alert("标题和内容数目不相同!"); 216 } 217 218 for(var i = 0 ; i < Ds.length ; i++) 219 { 220 if(i==open) 221 { 222 Ds[i].style.height = dH+"px"; 223 Ts[i].className="title01"; 224 } 225 else 226 { 227 Ds[i].style.height = "0px"; 228 Ts[i].className="title02"; 229 } 230 Ts[i].value = i; 231 Ts[i].onmouseover = function(){ 232 if(open==this.value) 233 { 234 return false; 235 } 236 Ts[open].className="title02"; 237 Ts[this.value].className="title01"; 238 for(var i = 0 ; i < openState.length ; i++) 239 { 240 clearTimeout(openState[i]); 241 clearTimeout(closeState[i]); 242 } 243 closeMe(open,this.value); 244 //openMe(this.value); 245 open = this.value; 246 } 247 } 248 function showDiv(id){ 249 Ds[id].style.height=dH+"px"; 250 Ds[open].style.height="0px"; 251 open = id; 252 } 253 </script> 254 更多详细内容请查看：http://www.111cn.net/js_a/76/33038.htm