<mce:style type="text/css"><!-- .Cl{ background-color:#FDF5E6; } --></mce:style><style type="text/css" mce_bogus="1"> .Cl{ background-color:#FDF5E6; } </style> <mce:script src="../js/jquery-1.3.min.js" mce_src="js/jquery-1.3.min.js" language="javascript" type="text/javascript"></mce:script> <mce:script type="text/javascript"><!-- $().ready(function(){ $("div").css("display","none"); $("#idd1").show(); $("#1").addClass("Cl"); $("td a").click(function(){ changW(this.id); }); }) var isDown = "0"; var PreDiv="1"; var currentDiv="1"; function changW(id) { //先赋值再加事件 PreDiv = currentDiv; currentDiv = id; pre(); } function pre() { if(currentDiv!=PreDiv) { $("#idd"+currentDiv).slideDown("slow"); $("#idd"+PreDiv).slideUp("slow"); $("#"+currentDiv).addClass("Cl"); $("#"+PreDiv).removeClass("Cl"); }else { $("#idd"+currentDiv).slideToggle("slow"); $("#"+currentDiv).toggleClass("Cl"); } } // --></mce:script> <form id="form1" runat="server"> <table> <tr> <td style="width: 100px;"> <a href="#" mce_href="#" id="1">第一层</a></td> </tr> <tr> <td style="width: 100px"> <div id="idd1" style="width:100%; height:300px;"> <p>dd</p> <p>dd</p> <p>dd</p> <p>dd</p> <p>dd</p> <p>dd</p> </div> </td> </tr> <tr> <td style="width: 100px; height: 21px"> <a href="#" mce_href="#" id="2">第二层</a> </td> </tr> <tr> <td style="width: 100px"> <div id="idd2" style="width:100%; height:300px;"> <p>qq<p> <p>qq</p> <p>qq</p> <p>qq</p> <p>qq</p> <p>qq</p> </div> </td> </tr> <tr> <td style="width: 100px"> <a href="#" mce_href="#" id="3">第三层</a> </td> </tr> <tr> <td style="width: 100px"> <div id="idd3" style="width:100%; height:300px;"> <p>zz</p> <p>zz</p> <p>zz</p> <p>zz</p> <p>zz</p> <p>zz</p> </div> </td> </tr> </table> </form>