jquery注册事件 实现导航的功能，点击导航大分类弹出小分类
下面是Jquery代码
<mce:script type="text/javascript"><!-- $(function(){ $("#tr1 div").bind("click", showMsg);//给所有在tr1里面的DIV注册一个OnClick事件 }); function showMsg(){ var name = $(this).attr("id"); //获取ID ps:强大的选择器就是方便啊 if(name[0]=="p"){ for(var k=1;k<5;k++){ var cid="child"+k; if(k==name[6]){ $("#"+cid+"").show(); }else{ $("#"+cid+"").hide(); } } } } // --></mce:script>
页面代码
<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <table width="171" border="0" cellspacing="0" cellpadding="0" height="100%"> <tr id="tr1"> <td background="images/left_bg_admin.jpg" valign="top" align="center"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="30"> </td> </tr> </table> <div id="parent1" class="parent" style="display:block" mce_style="display:block"> <table width="150" border="0" cellspacing="0" cellpadding="0"> <tr> <td background="images/bt_bg1_admin_left.jpg" height="22"> <a href="#" mce_href="#" class="a01">商品管理1</a></td> </tr> </table> <table width="150" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="6"></td> </tr> </table> </div> <div id="child1" class="child" style="display:none" mce_style="display:none"> <table width="150" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="30" align="right" height="22"><img src="images/icon_list2.gif" mce_src="images/icon_list2.gif" width="9" height="9"></td> <td width="10"> </td> <td><a href="Products/ZuanShi.aspx?type=1" mce_href="Products/ZuanShi.aspx?type=1" class="link2" target=main>钻石列表</a></td> </tr> </table> <table width="150" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="30" align="right" height="22"><img src="images/icon_list2.gif" mce_src="images/icon_list2.gif" width="9" height="9"></td> <td width="10"> </td> <td><a href="Products/AddZuanShi.aspx?type=添加" mce_href="Products/AddZuanShi.aspx?type=添加" class="link2" target=main>添加钻石</a></td> </tr> </table> <table width="150" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="30" align="right" height="22"><img src="images/icon_list2.gif" mce_src="images/icon_list2.gif" width="9" height="9"></td> <td width="10"> </td> <td><a href="Products/JieTuo.aspx" mce_href="Products/JieTuo.aspx" class="link2" target=main>戒托列表</a></td> </tr> </table> <table width="150" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="30" align="right" height="22"><img src="images/icon_list2.gif" mce_src="images/icon_list2.gif" width="9" height="9"></td> <td width="10"> </td> <td><a href="Products/AddJieTuo.aspx?type=添加" mce_href="Products/AddJieTuo.aspx?type=添加" class="link2" target=main>添加戒托</a></td> </tr> </table> <table width="150" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="30" align="right" height="22"><img src="images/icon_list2.gif" mce_src="images/icon_list2.gif" width="9" height="9"></td> <td width="10"> </td> <td><a href="Products/Upload.aspx" mce_href="Products/Upload.aspx" class="link2" target=main>上传产品</a></td> </tr> </table> <table width="150" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="6"></td> </tr> </table> </div> <div id="parent2" class="parent" style="display:block" mce_style="display:block"> <table width="150" border="0" cellspacing="0" cellpadding="0"> <tr> <td background="images/bt_bg1_admin_left.jpg" height="22"> <a href="#" mce_href="#" class="a01">商品管理2</a></td> </tr> </table> <table width="150" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="6"></td> </tr> </table> </div> <div id="child2" class="child" style="display:none" mce_style="display:none"> <table width="150" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="30" align="right" height="22"><img src="images/icon_list2.gif" mce_src="images/icon_list2.gif" width="9" height="9"></td> <td width="10"> </td> <td><a href="Products/ZuanShi.aspx?type=1" mce_href="Products/ZuanShi.aspx?type=1" class="link2" target=main>钻石列表</a></td> </tr> </table> <table width="150" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="30" align="right" height="22"><img src="images/icon_list2.gif" mce_src="images/icon_list2.gif" width="9" height="9"></td> <td width="10"> </td> <td><a href="Products/AddZuanShi.aspx?type=添加" mce_href="Products/AddZuanShi.aspx?type=添加" class="link2" target=main>添加钻石</a></td> </tr> </table> <table width="150" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="30" align="right" height="22"><img src="images/icon_list2.gif" mce_src="images/icon_list2.gif" width="9" height="9"></td> <td width="10"> </td> <td><a href="Products/JieTuo.aspx" mce_href="Products/JieTuo.aspx" class="link2" target=main>戒托列表</a></td> </tr> </table> <table width="150" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="30" align="right" height="22"><img src="images/icon_list2.gif" mce_src="images/icon_list2.gif" width="9" height="9"></td> <td width="10"> </td> <td><a href="Products/AddJieTuo.aspx?type=添加" mce_href="Products/AddJieTuo.aspx?type=添加" class="link2" target=main>添加戒托</a></td> </tr> </table> <table width="150" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="30" align="right" height="22"><img src="images/icon_list2.gif" mce_src="images/icon_list2.gif" width="9" height="9"></td> <td width="10"> </td> <td><a href="Products/Upload.aspx" mce_href="Products/Upload.aspx" class="link2" target=main>上传产品</a></td> </tr> </table> <table width="150" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="6"></td> </tr> </table> </div> <div id="parent3" class="parent" style="display:block" mce_style="display:block"> <table width="150" border="0" cellspacing="0" cellpadding="0"> <tr> <td background="images/bt_bg1_admin_left.jpg" height="22"> <a href="#" mce_href="#" class="a01">商品管理3</a></td> </tr> </table> <table width="150" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="6"></td> </tr> </table> </div> <div id="child3" class="child" style="display:none" mce_style="display:none"> <table width="150" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="30" align="right" height="22"><img src="images/icon_list2.gif" mce_src="images/icon_list2.gif" width="9" height="9"></td> <td width="10"> </td> <td><a href="Products/ZuanShi.aspx?type=1" mce_href="Products/ZuanShi.aspx?type=1" class="link2" target=main>钻石列表</a></td> </tr> </table> <table width="150" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="30" align="right" height="22"><img src="images/icon_list2.gif" mce_src="images/icon_list2.gif" width="9" height="9"></td> <td width="10"> </td> <td><a href="Products/AddZuanShi.aspx?type=添加" mce_href="Products/AddZuanShi.aspx?type=添加" class="link2" target=main>添加钻石</a></td> </tr> </table> <table width="150" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="30" align="right" height="22"><img src="images/icon_list2.gif" mce_src="images/icon_list2.gif" width="9" height="9"></td> <td width="10"> </td> <td><a href="Products/JieTuo.aspx" mce_href="Products/JieTuo.aspx" class="link2" target=main>戒托列表</a></td> </tr> </table> <table width="150" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="30" align="right" height="22"><img src="images/icon_list2.gif" mce_src="images/icon_list2.gif" width="9" height="9"></td> <td width="10"> </td> <td><a href="Products/AddJieTuo.aspx?type=添加" mce_href="Products/AddJieTuo.aspx?type=添加" class="link2" target=main>添加戒托</a></td> </tr> </table> <table width="150" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="30" align="right" height="22"><img src="images/icon_list2.gif" mce_src="images/icon_list2.gif" width="9" height="9"></td> <td width="10"> </td> <td><a href="Products/Upload.aspx" mce_href="Products/Upload.aspx" class="link2" target=main>上传产品</a></td> </tr> </table> <table width="150" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="6"></td> </tr> </table> </div> <div id="parent4" class="parent" style="display:block" mce_style="display:block"> <table width="150" border="0" cellspacing="0" cellpadding="0"> <tr> <td background="images/bt_bg1_admin_left.jpg" height="22"> <a href="#" mce_href="#" class="a01">商品管理4</a></td> </tr> </table> <table width="150" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="6"></td> </tr> </table> </div> <div id="child4" class="child" style="display:none" mce_style="display:none"> <table width="150" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="30" align="right" height="22"><img src="images/icon_list2.gif" mce_src="images/icon_list2.gif" width="9" height="9"></td> <td width="10"> </td> <td><a href="Products/ZuanShi.aspx?type=1" mce_href="Products/ZuanShi.aspx?type=1" class="link2" target=main>钻石列表</a></td> </tr> </table> <table width="150" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="30" align="right" height="22"><img src="images/icon_list2.gif" mce_src="images/icon_list2.gif" width="9" height="9"></td> <td width="10"> </td> <td><a href="Products/AddZuanShi.aspx?type=添加" mce_href="Products/AddZuanShi.aspx?type=添加" class="link2" target=main>添加钻石</a></td> </tr> </table> <table width="150" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="30" align="right" height="22"><img src="images/icon_list2.gif" mce_src="images/icon_list2.gif" width="9" height="9"></td> <td width="10"> </td> <td><a href="Products/JieTuo.aspx" mce_href="Products/JieTuo.aspx" class="link2" target=main>戒托列表</a></td> </tr> </table> <table width="150" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="30" align="right" height="22"><img src="images/icon_list2.gif" mce_src="images/icon_list2.gif" width="9" height="9"></td> <td width="10"> </td> <td><a href="Products/AddJieTuo.aspx?type=添加" mce_href="Products/AddJieTuo.aspx?type=添加" class="link2" target=main>添加戒托</a></td> </tr> </table> <table width="150" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="30" align="right" height="22"><img src="images/icon_list2.gif" mce_src="images/icon_list2.gif" width="9" height="9"></td> <td width="10"> </td> <td><a href="Products/Upload.aspx" mce_href="Products/Upload.aspx" class="link2" target=main>上传产品</a></td> </tr> </table> <table width="150" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="6"></td> </tr> </table> </div> </td> <td bgcolor="#D1E6F7" width="1"></td> </tr> </table> </body> </html>