div隐藏与展现
Java code[color=#FF0000]怎么样才能点击左边的显示右边的 各位大哥看看我的哪里错了[/color]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title>111</title> <style type="text/css"> .td1{ font-weight:bold; background-color:#ecf5fe; border-width:thin; border-style:solid; border-color:#c1d7ee; border-right:none; } .td2{ border-bottom-width:thin; border-bottom-style:solid; border-bottom-color: #CCCCCC; border-right-width:thin; border-right-color:#c1d7ee; border-right-style:solid; } .td1 a{ text-decoration:none; } .td2 a{ text-decoration:none; color:#2965b1; } </style> <script type="text/javascript"> function dis(obj,str){ var liArr = document.getElementById("tab1").getElementsByTagName("td"); for(i = 0;i<liArr.length;i++){ liArr[i].className = "td2"; } obj.className = "td1"; var content_front_Arr = document.getElementById("divid").childNodes; for(i = 0;i<content_front_Arr.length;i++){ content_front_Arr[i].style.display="none"; } document.getElementById(str).style.display="block"; } </script> </head><body><table width="950" border="0" cellpadding="0" cellspacing="0" align="center"> <!--banner和导航栏--> <tr> <td width="950"><img src="../../Images/banner.jpg"></td> </tr> <tr> <td width="950" height="30" bgcolor="#2c7ac5" valign="middle"> <table width="950" border="0" cellspacing="0" cellpadding="0" style="font-size:14px; color:#FFFFFF; font-weight:bold; "> <tr> <td width="14%"> </td> <td width="12%" align="center" valign="middle" style="border-right-width:thin; border-right-color: #FFFFFF; border-right-style: dotted; padding-top:2px;"> <a href="learn1" style="text-decoration:none; color:#FFFFFF;"></a></td> <td width="12%" align="center" valign="middle" style="border-right-width:thin; border-right-color: #FFFFFF; border-right-style: dotted; padding-top:2px;"> <a href="mockexam.jsp" style="text-decoration:none; color:#FFFFFF;"></a></td> <td width="12%" align="center" valign="middle" style="border-right-width:thin; border-right-color: #FFFFFF; border-right-style: dotted; padding-top:2px;"> <a href="exam.jsp" style="text-decoration:none; color:#FFFFFF;"></a></td> <td width="12%" align="center" valign="middle" style="border-right-width:thin; border-right-color: #FFFFFF; border-right-style: dotted; padding-top:2px;"> <a href="download" style="text-decoration:none; color:#FFFFFF;"></a></td> <td width="12%" align="center" valign="middle" style="border-right-width:thin; border-right-color: #FFFFFF; border-right-style: dotted; padding-top:2px;"> <a href="" style="text-decoration:none; color:#FFFFFF;"></a></td> <td width="12%" align="center" valign="middle" style="padding-top:2px;"> <a href="" style="text-decoration:none; color:#FFFFFF;"></a></td> <td width="14%"> </td> </tr> </table> </td> </tr> <tr> <td width="950" height="16" valign="top" background="Images/banner_line.png"> </td> </tr> <!--中间内容区，包含左右结构--> <tr> <td width="950"> <table width="950" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="10"> </td> <!--左侧引导栏--> <td width="180" valign="top"> <table id="tab1" width="100%" border="0" cellspacing="0" cellpadding="0" style="font-size:12px; color:#2965b1;"> <tr> <td width="100%" height="10"> </td> </tr> <tr> <td class="td1" id="1" width="100%" height="30" align="right" valign="middle" onClick="dis(this,'content_front_1')" > <a href="javascript:;" id="DropBM1">地图</a> </td> </tr> <tr> <td class="td2" id="2" width="100%" height="30" align="right" valign="middle"onClick="dis(this,'content_front_2')" > <a href="javascript:;" id="DropBM2" >入口</a> </td> </tr> <tr> <td class="td2" id="3" width="100%" height="30" align="right" valign="middle" onClick="dis(this,'content_front_3')"> <a href="javascript:;" id="DropBM3" >前台</a> </td> </tr> <tr> <td class="td2" id="4" width="100%" height="30" align="right" valign="middle" onClick="dis(this,'content_front_4')" > <a href="javascript:;" id="DropBM4" >用户区</a> </td> </tr> <tr> <td class="td2" id="5" width="100%" height="30" align="right" valign="middle" onClick="dis(this,'content_front_5')" > <a href="javascript:;" id="DropBM5" >测试机房</a> </td> </tr> <tr> <td class="td2" id="6" width="100%" height="30" align="right" valign="middle" onClick="dis(this,'content_front_6')" > <a href="javascript:;" id="DropBM6" >实验室演示厅</a> </td> </tr> <tr> <td class="td2" id="7" width="100%" height="30" align="right" valign="middle" onClick="dis(this,'content_front_7')" > <a href="javascript:;" id="DropBM6" >水喷淋</a> </td> </tr> <tr> <td class="td2" id="8" width="100%" height="30" align="right" valign="middle"onClick="dis(this,'content_front_8')"> <a href="javascript:;" id="DropBM7" >安全设备</a> </td> </tr> <tr> <td class="td2" id="9" width="100%" height="30" align="right" valign="middle" onClick="dis(this,'content_front_9')"> <a href="javascript:;" id="DropBM8" >走廊</a> </td> </tr> </table> </td> <td width="10"> </td> <!--右侧内容栏--> <td width="750" valign="top"> <table width="750" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="100%" height="40" valign="bottom" style="font-size:12px; color: #999999; padding-left:5px;">资料下载</td> </tr> <tr> <td width="100%" height="10"></td> </tr> <tr> <td width="100%" height="7" bgcolor="#efefef"></td> </tr> <tr> <td width="100%" style="padding-top:30px; padding-left:5px;" valign="top"> <div id="divid" style="width:750px;"> <div id="content_front_1" class="drop1"> 11111 </div> <div id="content_front_2" class="drop2" > 222 </div> <div id="content_front_3" class="drop3" > 3333 </div> <div id="content_front_4" class="drop4" style="display:none;"> </div> <div id="content_front_5" class="drop5" style="display:none;"> </div> <div id="content_front_6" class="drop6" style="display:none;"> </div> <div id="content_front_7" class="drop7" style="display:none;"> </div> <div id="content_front_8" class="drop8" style="display:none;"> </div> <div id="content_front_9" class="drop9" style="display:none;"> </div> </div> </td> </tr> </tr> </table> </td> </tr> </table> </td> </tr> <!--底部区--> <tr> <td width="950" valign="top" align="center"><img src="../../Images/bottom.png"></td> </tr></table></body></html>