单击同一按钮显示Div 2和Hide Div 1

Question

很抱歉写这么笨的标题。 但是我没有得到其他关键词。

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

示例：用户列表：

用户1用户2

onclick 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').hide()
$('#div1').show()

Answer 2

提供所有div的同一个类，让其说“ .chat”，然后将所有div都隐藏为“ .chat”类，并显示要显示的一个

<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();
});

Answer 3

与其显示/隐藏，不如总是有一个div，然后更改内容