Показать Div 2 и Hide Div 1 при нажатии на ту же кнопку

Question

Мне жаль, что я написал такой немой заголовок. Но у меня не было других ключевых слов.

В любом случае, я хочу, чтобы я делал чат-приложение, поэтому на моей странице есть список пользователей онлайн. при нажатии на пользователя 1 в правой части страницы открывается div с именем пользователя с щелчком. но тогда проблема в том, что, когда я нажимаю другое имя пользователя в списке пользователей, предыдущий пользовательский div должен закрываться, а второй пользовательский div должен открываться.

пример: СПИСОК ПОЛЬЗОВАТЕЛЕЙ:

ПОЛЬЗОВАТЕЛЯ 1 ПОЛЬЗОВАТЕЛЯ 2

OnClick ПОЛЬЗОВАТЕЛЯ 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

обеспечивает все ДИВ тот же класс скажет «.chat», а затем скрыть все DIV с классом «.chat» и показать тот, который вы хотите показать для экс

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

и теперь, если вы хотите, чтобы показать DIV с идентификатором user3 вы можете сделать что-то вроде этого

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

и если вы используете какое-либо событие щелчка, чтобы показать и скрыть вещи затем работать с живым кликом, а не просто нажмите

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

Answer 2

Вместо показать/скрыть, что о просто имея один Div всегда есть, и просто изменить содержимое

Answer 3

Украсить все чат-divs классом идентификации; такие как «чат», то сделать это:

$('.chat').hide() 
$('#div1').show()