php - 单击同一按钮显示 Div 2 和隐藏 Div 1

Question

我很抱歉写了这么一个愚蠢的标题。但我没有得到任何其他关键字。

无论如何，我想要的功能是我正在制作一个聊天应用程序，因此在我的页面中有一个在线用户列表。单击用户 1 时，将在页面右侧打开一个带有被单击用户名称的 div。但随后的问题是，当我单击用户列表中的其他用户名时，前一个用户 div 应该关闭，第二个用户 div 应该打开。

例子: 用户列表:

用户 1 用户 2

点击 USER 1 = DIV 1 出现。

然后当我点击 USER 2 时。

然后 DIV 1 应该隐藏，DIV 2 应该出现。

因此，如果有 USER 3，并且 DIV 1 已打开，如果我单击 USER 3，则 DIV 1 应该隐藏，DIV 3 应该显示。

我希望我说得足够清楚:)

代码:

<?php
   $get = mysql_query("SELECT * FROM friends WHERE online='1' AND to_id='$pid' AND active='Confirm'");
   while($get2 = mysql_fetch_assoc($get))
   {
    $id = $get2['id'];
    $senderid = $get2['sender_id'];

    $getpic = mysql_query("SELECT * FROM people WHERE id='$senderid'");
    $getpic2 = mysql_fetch_assoc($getpic);
    $mypic = $getpic2['filename'];
    $pic = "<img src=\"images/" .$mypic. "\" width=\"40\" height=\"40\">";

    $getname = mysql_query("SELECT * FROM users WHERE id='$senderid'");
    $getname2 = mysql_fetch_assoc($getname);
    $name = $getname2['fname'];

    echo "<style>table#user-$id:hover{background-color : #86daff; cursor : pointer;}</style><table width=\"200\" id=\"user-$id\">
    <tr>
    <td width=\"40\" style=\"padding-right : 4px;\">
     $pic
    </td>
    <td style=\"padding-right : 10px;float : left; color : blue;font-weight : bold;\">
    $name
    </td>
    <td>
    <table width=\"10\" height=\"10\" title=\"New Message !\" bgcolor=\"red\"><tr><td>    </td></tr></table>
    </td>
    </tr>
    </table>




    ";
    ?>


  <script>
  $(document).ready(function(){


     $("table#user-<?php echo $id; ?>").click(function(){

        $("#chatholder-<?php echo $id; ?>").show();

        //$("#chatinner-<?php echo $id; ?>").html(<?php echo $name; ?>);



     });



  });


  </script>


  </div></div></td>
  <td width="100">
 </td>
    <td>

    <div id="chatholder-<?php echo $id; ?>" style="display : none;float : right;width : 500px; height : 500px; border : 1px solid #d7d7d7;">
  <div id="chatinner-<?php echo $id; ?>" style="background-color : #86daff; padding-top : 5px; text-align : center; color : white; font-weight : bold; font-size : 14px;height : 25px; ">
  <?php echo $name; ?>
  </div>

  <br/>

<div id="send">
<textarea></textarea>

</div>



  </div>

















  <script>

  $('#chatholder-<?php echo $id; ?>').click(function(event){

                event.stopPropagation();

        });

         $('table#user-<?php echo $id; ?>').click(function(event){

               event.stopPropagation();

        });
        $('html').click(function() {

               $('#chatholder-<?php echo $id; ?>').hide();
                      });



  </script>

 </td>
   <?php

   }


 ?>

Answer 1

提供所有 div 的同一个类让我们说“.chat”，然后隐藏所有类为“.chat”的 div 并显示你想为 ex 显示的那个

<div id="user1" class="chat">
<div id="user2" class="chat">
<div id="user3" class="chat">

现在如果你想显示 id 为 user3 的 div，你可以这样做

$('.chat').hide();
 $('#user3').show();

如果您使用任何点击事件来显示和隐藏内容，那么使用实时点击而不是仅仅点击

$('#somebutton').live("click",function(){
     $('.chat').hide();
 $('#user3').show();
});