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 に答える