实现DIV重叠例子

 <style type="text/css">

.jdjj{}

</style>

<TR bgColor=#ffffff>
                <TD height="27" colSpan=5 align=center valign="middle" background="/static/images/bj02.gif" bgColor=#F2F5FB class="zhu"><a href="#" class="zhu" onclick="jdjjchange(0)"><span class="z">真题 </span></a>|<a href="#" class="zhu" onclick="jdjjchange(1)"><span class="z"> 解读 </span></a>|<a href="#" class="zhu" onclick="jdjjchange(2)"><span class="z"> 关注 </span></a> |<a href="#" class="zhu" onclick="jdjjchange(3)"><span class="z"> 疑问</span></a></TD>
              </TR>

<td colspan="5">
      <div id="jdjj">
     <div class="jdjj"><table width="177" height="201" border="0" align="center" cellpadding="0" cellspacing="1"
    bgcolor="#9bc2e0">
  <tbody>
    <tr bgcolor="#ffffff">
      <td width="34" height="24" align="center" valign="middle" bgcolor="#B5EEF4" class="zhu"><a href="#" target="_blank" class="zhu">会计</a></td>
      <td width="34" align="center" valign="middle" bgcolor="#B5EEF4" class="zhu"><a href="#">审计</a></td>
      <td width="31" align="center" valign="middle" bgcolor="#B5EEF4" class="zhu"><a href="#">税法</a></td>
      <td width="31" align="center" valign="middle" bgcolor="#B5EEF4" class="zhu"><a href="#">财管</a></td>
      <td width="41" align="center" valign="middle" bgcolor="#B5EEF4" class="zhu"><a href="#" target="_blank">经济法</a></td>
    </tr>
    <tr bgcolor="#ffffff">
      <td height="19" align="center" valign="middle" class="zx1"><a
          href="#"
          target="_blank" class="zx1">07</a></td>
      <td align="center" valign="top" class="zx1"><a
          href="#"
          target="_blank" class="zx1">07</a></td>
      <td align="center" valign="top" class="zx1"><a
          href="#"
          target="_blank" class="zx1">07</a></td>
      <td align="center" valign="top" class="zx1"><a
          href="#"
          target="_blank" class="zx1">07</a></td>
      <td align="center" valign="top" class="zx1"><a
          href="#"
          target="_blank" class="zx1">07</a></td>
    </tr>
    <tr bgcolor="#ffffff">
      <td height="19" align="center" valign="middle" class="zx1"><a
          href="#"
          target="_blank" class="zx1">06</a></td>
      <td align="center" valign="top" class="zx1"><a
          href="#"
          target="_blank" class="zx1">06</a></td>
      <td align="center" valign="top" class="zx1"><a
          href="#"
          target="_blank" class="zx1">06</a></td>
      <td align="center" valign="top" class="zx1"><a
          href="#"
          target="_blank" class="zx1">06</a></td>
      <td align="center" valign="top" class="zx1"><a
          href="#"
          target="_blank" class="zx1">06</a></td>
    </tr>
    <tr bgcolor="#000000">
      <td height="19" align="center" valign="top" bgcolor="#FFFFFF" class="zx1"><a
          href="#"
          target="_blank" class="zx1">05</a></td>
      <td align="center" valign="top" bgcolor="#FFFFFF" class="zc"><a
          href="#"
          target="_blank" class="zx1">05</a></td>
      <td align="center" valign="top" bgcolor="#FFFFFF" class="zx1"><a
          href="#"
          target="_blank" class="zx1">05</a></td>
      <td align="center" valign="top" bgcolor="#FFFFFF" class="zx1"><a
          href="#"
          target="_blank" class="zx1">05</a></td>
      <td align="center" valign="top" bgcolor="#FFFFFF" class="zx1"><a
          href="#"
          target="_blank" class="zx1">05</a></td>
    </tr>
    <tr bgcolor="#ffffff">
      <td height="19" align="center" valign="top" class="zx1"><a
          href="#"
          target="_blank" class="zx1">04</a></td>
      <td align="center" valign="top" class="zx1"><a
          href="#"
          target="_blank" class="zx1">04</a></td>
      <td align="center" valign="top" class="zc"><a
          href="#"
          target="_blank" class="zx1">04</a></td>
      <td align="center" valign="top" class="zx1"><a
          href="#"
          target="_blank" class="zx1">04</a></td>
      <td align="center" valign="top" class="zx1"><a
          href="#"
          target="_blank" class="zx1">04</a></td>
    </tr>
    <tr bgcolor="#ffffff">
      <td height="20" align="center" valign="top" class="zx1"><a
          href="#"
          target="_blank" class="zx1">03</a></td>
      <td align="center" valign="top" class="zx1"><a
          href="#"
          target="_blank" class="zx1">03</a></td>
      <td align="center" valign="top" class="zx1"><a
          href="#"
          target="_blank" class="zx1">03</a></td>
      <td align="center" valign="top" class="zx1"><a
          href="#"
          target="_blank" class="zx1">03</a></td>
      <td align="center" valign="top" class="zx1"><a
          href="#"
          target="_blank" class="zx1">03</a></td>
    </tr>
    <tr bgcolor="#ffffff">
      <td height="19" align="center" valign="top" class="zx1"><a
          href="#"
          target="_blank" class="zx1">02</a></td>
      <td align="center" valign="top" class="zx1"><a
          href="#"
          target="_blank" class="zx1">02</a></td>
      <td align="center" valign="top" class="zx1"><a
          href="#"
          target="_blank" class="zx1">02</a></td>
      <td align="center" valign="top" class="zx1"><a
          href="#"
          target="_blank" class="zx1">02</a></td>
      <td align="center" valign="top" class="zx1"><a
          href="#"
          target="_blank" class="zx1">02</a></td>
    </tr>
    <tr bgcolor="#ffffff">
      <td height="19" align="center" valign="top" class="zx1"><a
          href="#"
          target="_blank" class="zx1">01</a></td>
      <td align="center" valign="top" class="zx1"><a
          href="#" target="_blank" class="zx1">01</a></td>
      <td align="center" valign="top" class="zx1"><a
          href="#"
          target="_blank" class="zx1">01</a></td>
      <td align="center" valign="top" class="zx1"><a
          href="#"
          target="_blank" class="zx1">01</a></td>
      <td align="center" valign="top" class="zx1"><a
          href="#"
          target="_blank" class="zx1">01</a></td>
    </tr>
   
  </tbody>
</table></div>
     <div class="jdjj" style="display:none;"><table width="177" height="197" border="0" align="center" cellpadding="0" cellspacing="1"
    bgcolor="#9bc2e0">
<tbody>
  <tr bgcolor="#ffffff">
    <td width="32" height="28" align="center" valign="middle" bgcolor="#f0f0f0" class="zhu"><a href="#" target="_blank" class="zhu">注会</a></td>
    <td width="34" height="28" align="center" valign="middle" bgcolor="#f0f0f0" class="zhu"><a href="#">注税</a></td>
    <td width="52" height="28" align="center" valign="middle" bgcolor="#f0f0f0" class="zhu"><a href="#">中级职称</a></td>
    <td width="54" height="28" align="center" valign="middle" bgcolor="#f0f0f0" class="zhu"><a href="#" target="_blank">初级职称</a></td>
  </tr>
  <tr bgcolor="#ffffff">
    <td height="50" colspan="4" align="center" valign="middle" class="zx"><table width="171" height="27" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="84" height="27" align="center" valign="middle"><div class="iu" style="background:url(/static/images/anniu2.gif);width:68px; height:23px;overflow:hidden;">
              <div class="z" style="margin-top:5px;"><a href="#" target="_blank" class="z">考试大纲</a></div>
          </div></td>
          <td width="85" align="center" valign="middle"><div class="iu" style="background:url(/static/images/anniu2.gif);width:68px; height:23px;overflow:hidden;">
              <div class="z" style="margin-top:5px;"><a href="#" target="_blank" class="z">历年真题</a></div>
          </div></td>
        </tr>
    </table></td>
  </tr>
  <tr bgcolor="#ffffff">
    <td height="54" colspan="4" align="center" valign="middle" class="zx"><table width="171" height="27" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="84" height="27" align="center" valign="middle"><div class="iu" style="background:url(/static/images/anniu2.gif);width:68px; height:23px;overflow:hidden;">
              <div class="z" style="margin-top:5px;"><a href="#" target="_blank" class="z">08年真题</a></div>
          </div></td>
          <td width="85" align="center" valign="middle"><div class="iu" style="background:url(/static/images/anniu2.gif);width:68px; height:23px;overflow:hidden;">
              <div class="z" style="margin-top:5px;"><a href="#" target="_blank" class="z">学习技巧</a></div>
          </div></td>
        </tr>
    </table></td>
  </tr>
  <tr bgcolor="#ffffff">
    <td height="60" colspan="4" align="center" valign="middle" class="zx"><table width="171" height="27" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="84" height="27" align="center" valign="middle"><div class="iu" style="background:url(/static/images/anniu2.gif);width:68px; height:23px;overflow:hidden;">
              <div class="z" style="margin-top:5px;"><a href="#" target="_blank" class="z">学习方法</a></div>
          </div></td>
          <td width="85" align="center" valign="middle"><div class="iu" style="background:url(/static/images/anniu2.gif);width:68px; height:23px;overflow:hidden;">
              <div class="z" style="margin-top:5px;"><a href="#" target="_blank" class="z">复习指导</a></div>
          </div></td>
        </tr>
    </table></td>
  </tr>
</tbody>
</table></div>
     <div class="jdjj" style="display:none;"><table width="177" height="197" border="0" align="center" cellpadding="0" cellspacing="1"
    bgcolor="#9bc2e0">
<tbody>
  <tr bgcolor="#ffffff">
    <td width="32" height="28" align="center" valign="middle" bgcolor="#f0f0f0" class="zhu"><a href="#" target="_blank" class="zhu">注会</a></td>
    <td width="34" height="28" align="center" valign="middle" bgcolor="#f0f0f0" class="zhu"><a href="#">注税</a></td>
    <td width="52" height="28" align="center" valign="middle" bgcolor="#f0f0f0" class="zhu"><a href="#">中级职称</a></td>
    <td width="54" height="28" align="center" valign="middle" bgcolor="#f0f0f0" class="zhu"><a href="#" target="_blank">初级职称</a></td>
  </tr>
  <tr bgcolor="#ffffff">
    <td height="50" colspan="4" align="center" valign="middle" class="zx"><table width="171" height="27" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="84" height="27" align="center" valign="middle"><div class="iu" style="background:url(/static/images/anniu2.gif);width:68px; height:23px;overflow:hidden;">
            <div class="z" style="margin-top:5px;"><a href="#" target="_blank" class="z">考试动态</a></div>
        </div></td>
        <td width="85" align="center" valign="middle"><div class="iu" style="background:url(/static/images/anniu2.gif);width:68px; height:23px;overflow:hidden;">
            <div class="z" style="margin-top:5px;"><a href="#" target="_blank" class="z">名师访谈</a></div>
        </div></td>
      </tr>
    </table></td>
  </tr>
  <tr bgcolor="#ffffff">
    <td height="54" colspan="4" align="center" valign="middle" class="zx"><table width="171" height="27" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="84" height="27" align="center" valign="middle"><div class="iu" style="background:url(/static/images/anniu2.gif);width:68px; height:23px;overflow:hidden;">
            <div class="z" style="margin-top:5px;"><a href="#" target="_blank" class="z">在线答疑</a></div>
        </div></td>
        <td width="85" align="center" valign="middle"><div class="iu" style="background:url(/static/images/anniu2.gif);width:68px; height:23px;overflow:hidden;">
            <div class="z" style="margin-top:5px;"><a href="#" target="_blank" class="z">学员好评</a></div>
        </div></td>
      </tr>
    </table></td>
  </tr>
  <tr bgcolor="#ffffff">
    <td height="60" colspan="4" align="center" valign="middle" class="zx"><table width="171" height="27" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="84" height="27" align="center" valign="middle"><div class="iu" style="background:url(/static/images/anniu2.gif);width:68px; height:23px;overflow:hidden;">
            <div class="z" style="margin-top:5px;"><a href="#" target="_blank" class="z">考前预测</a></div>
        </div></td>
        <td width="85" align="center" valign="middle"><div class="iu" style="background:url(/static/images/anniu2.gif);width:68px; height:23px;overflow:hidden;">
            <div class="z" style="margin-top:5px;"><a href="#" target="_blank" class="z">名师讲座</a></div>
        </div></td>
      </tr>
    </table></td>
  </tr>
</tbody>
</table></div>
     <div class="jdjj" style="display:none;"><table width="177" height="197" border="0" align="center" cellpadding="0" cellspacing="1"
    bgcolor="#9bc2e0">
<tbody>
  <tr bgcolor="#ffffff">
    <td width="32" height="28" align="center" valign="middle" bgcolor="#f0f0f0" class="zhu"><a href="#" target="_blank" class="zhu">注会</a></td>
    <td width="34" height="28" align="center" valign="middle" bgcolor="#f0f0f0" class="zhu"><a href="#">注税</a></td>
    <td width="52" height="28" align="center" valign="middle" bgcolor="#f0f0f0" class="zhu"><a href="#">中级职称</a></td>
    <td width="54" height="28" align="center" valign="middle" bgcolor="#f0f0f0" class="zhu"><a href="#" target="_blank">初级职称</a></td>
  </tr>
  <tr bgcolor="#ffffff">
    <td height="50" colspan="4" align="center" valign="middle" class="zx"><table width="171" height="27" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="84" height="27" align="center" valign="middle"><div class="iu" style="background:url(/static/images/anniu1.gif);width:68px; height:23px;overflow:hidden;">
            <div class="z" style="margin-top:5px;"><a href="#" target="_blank" class="z">热点</a></div>
        </div></td>
        <td width="85" align="center" valign="middle"><div class="iu" style="background:url(/static/images/anniu1.gif);width:68px; height:23px;overflow:hidden;">
            <div class="z" style="margin-top:5px;"><a href="#" target="_blank" class="z">重点</a></div>
        </div></td>
      </tr>
    </table></td>
  </tr>
  <tr bgcolor="#ffffff">
    <td height="54" colspan="4" align="center" valign="middle" class="zx"><table width="171" height="27" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="84" height="27" align="center" valign="middle"><div class="iu" style="background:url(/static/images/anniu1.gif);width:68px; height:23px;overflow:hidden;">
            <div class="z" style="margin-top:5px;"><a href="#" target="_blank" class="z">难点</a></div>
        </div></td>
        <td width="85" align="center" valign="middle"><div class="iu" style="background:url(/static/images/anniu1.gif);width:68px; height:23px;overflow:hidden;">
            <div class="z" style="margin-top:5px;"><a href="#" target="_blank" class="z">疑点</a></div>
        </div></td>
      </tr>
    </table></td>
  </tr>
  <tr bgcolor="#ffffff">
    <td height="60" colspan="4" align="center" valign="middle" class="zx"><table width="171" height="27" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="84" height="27" align="center" valign="middle"><div class="iu" style="background:url(/static/images/anniu1.gif);width:68px; height:23px;overflow:hidden;">
            <div class="z" style="margin-top:5px;"><a href="#" target="_blank" class="z">考点</a></div>
        </div></td>
        <td width="85" align="center" valign="middle"><div class="iu" style="background:url(/static/images/anniu1.gif);width:68px; height:23px;overflow:hidden;">
            <div class="z" style="margin-top:5px;"><a href="#" target="_blank" class="z">方法</a></div>
        </div></td>
      </tr>
    </table></td>
  </tr>
</tbody>
</table></div>
    </div>
      </td>

 

JS如下

function jdjjchange(i) {
        $(".jdjj").hide().eq(i).show(); //这段代码的功能是为了实现查找div中 class="jdjj"的DIV集合后，查询第I个DIV把它显示出来， 
    }

这段代码只为自己记忆