如果用jquery控制多个层显示和隐藏

<script src=scripts/jquery-1.8.3.min.js></script>
<script>
$(function() {
  $("div[id^='d']").hide();
});
function showMenu(n) {
  $("div[id^='d']").hide();
  $("#d" + n).show();
}
</script>
<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0" class="tsf"  >
 <tr>
  <td align="center" onmouseover="javascript:showMenu(1)" >显示1层</td>
  <td align="center" onmouseover="javascript:showMenu(2)" >显示2层</td>
  <td align="center" onmouseover="javascript:showMenu(3)" >显示3层</td>
  <td align="center" onmouseover="javascript:showMenu(4)" >显示4层</td>
 </tr>
</table><div id="d1">一层</div>
<div id="d2">二层</div>
<div id="d3">三层</div>
<div id="d4">四层</div>

解决方案 »

  1.   

    <html>
    <head>
    <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
    </head>
    <body>
    <table width="90%" border="0" align="center" cellpadding="0" cellspacing="0" class="tsf"  >
            <tr>
        
              <td align="center" >显示1层</td>
             <td align="center" >显示2层</td>
     <td align="center"  >显示3层</td>
     <td align="center" >显示4层</td>
    </tr>
    </table>
    <div id="d0">
    <div id="d1" style="display:block">11111111111</div>
    <div id="d2">222222222222</div>
    <div id="d3">3333333333333</div>
    <div id="d4">4444444444444</div>
    <div>
    <style>#d0 div{display:none;}</style>
    <script>
    $('table td').hover(function(){$('#d0 div').hide().eq($('table td').index(this)).show();},function(){$('#d0 div').hide();})
    </script>
    </body>
    </html>
      

  2.   

    $(function() {
      $("div[id^='d']").hide();
    });
    把这个去掉
    会了，谢谢