0

我有一个表格，我想使用一个表格单元格，这样当我单击它时，它会打开另一个与原始表格重叠的菜单表格，使用 Z-index 来执行此操作。我已经尝试了我能想到的一切。

<script type="text/javascript">
   $(document).ready(function(){
    $('#weblinkbut').click(function(){
            $('.weblinkmenu').css('z-indez','9');       
    $('.menuhome').css('z-index','8');
 });
});
</script>
<table id="menuhome" class="menuhome" width="181" height="250" border="1" bordercolor="#000000" bgcolor="#FFFFFF" cellspacing="5" cellpadding="">
<tr>
    <td width="75" height="90" id="weblinkbut">
    <p><img src="../../Resources/test/images/weblinkicon.png" width="40" height="40"></p><p>Website link</p>
    </div>
    </td>
    <td width="75" height="90"><p><img src="../../Resources/test/images/phoneicon.png" width="40" height="40"/></p>
    <p>Phone Number</p>
    </td>
</tr>
<tr>
    <td width="75" height="90"><p><img src="../../Resources/test/images/emailicon.jpg" width="40" height="40"></p>
    <p>Email address</p>
    </td>
    <td width="75" height="90"><p><img src="../../Resources/test/images/newdocicon.png" width="30" height="40">
<P>Plain Text</P> 
    </td>   
</tr>
 </table>

  <table id="weblinkmenu" class="weblinkmenu" width="181" height="250" border="1" bgcolor="#FFFFFF" bordercolor="#000000" cellspacing="5" cellpadding="">
  <tr>
  <td width="75" height="90"><p><img src="../../Resources/test/images/weblinkicon.png" width="40" height="40"></p>
  <p>Website link</p>
  </td>
  </tr>
  </table>
4

2 回答 2

0

我认为您缺少的是，这些表格没有相互叠放。position例如，您可以通过将两个表都设置为绝对值来实现此目的。否则z-index没有效果。看看这个小提琴：http: //jsfiddle.net/uTLhX/。

如果您像这样放置表格，则可以删除 z-index 并仅切换可见性，因为默认情况下，稍后定义的元素具有更高的 z-index

于 2013-05-23T08:56:41.920 回答
0

注意：z-index 仅适用于定位元素（位置：绝对、位置：相对或位置：固定）

于 2013-05-23T09:09:12.960 回答