Question

我有这个链接

   <a href='' style = 'color:black' id = 'compose'>Compose</a>

我希望它在点击时显示这个div id ='＃composemessage'

  <div id='buddies-messages' style= 'float:right;width:60%;height:100%;border:1px solid black' >    
    <!--compose message div-->
    <div id = '#composemessage'>
        <form>
          <div><textarea id='post_content' name='post_content' cols = '79' rows = '5'></textarea></div>
         <div style = 'float:right'><input type='submit' id='post' name='post' value='Post Status' /></div>

    </div>
 </div>

   <script>
     $('#compose').click(function (e) {
        e.preventDefault();
        $('#composemessage').show();
    });
   </script>

但是在点击链接之前，div已经显示了。可能是什么问题？

Answer 1

您必须将display:none;添加到您的div中，这样才能隐藏。您还必须删除DOM中的哈希 j08691 提及

  <div id='buddies-messages' style= 'float:right;width:60%;height:100%;border:1px solid black' >    
    <!--compose message div-->
    <div id = 'composemessage' style = 'display:none;'>
        <form>
          <div><textarea id='post_content' name='post_content' cols = '79' rows = '5'></textarea></div>
         <div style = 'float:right'><input type='submit' id='post' name='post' value='Post Status' /></div>

    </div>
 </div>

   <script>
     $('#compose').click(function (e) {
        e.preventDefault();
        $('#composemessage').show();
    });
   </script>

Answer 2

假设您实际上是先隐藏div，那么您的div的ID是错误的。删除#。

使用<div id = 'composemessage'>而非<div id = '#composemessage'>。

#是jQuery ID选择器。

Div在点击前已经显示

2 个答案: