Question

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

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

示例：用户名单：

用户1 用户2

onclick USER 1 = DIV 1出现。

然后点击USER 2。

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

所以，如果有用户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总是存在，只需更改内容

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

3 个答案: