使用jquery和css生成选项卡

我正在尝试制作GMail或Facebook聊天窗口底部的酒吧之类的东西我不想做聊天服务或类似的事情。

在facebook的聊天中，当你点击一个朋友时，一个矩形块会出现在可见页面的底部，上面有你朋友的名字和聊天记录

我想知道你能不能这样做，如果你有一个列表，你可以点击其中的每一个，并生成标签，其中包含你在页面底部点击的内容的相应信息

我是否必须首先为每个选项卡生成选项卡，然后设置display:none，然后当我要生成选项卡时，使用[请原谅下面的语法错误]

$(##tab attribute##).click(function {
        ##selected tab##.show()
     }
 )

---

如果我理解正确的话。。。您不必创建选项卡，因为您可以动态创建它们。请看一看这个简单的实现

编辑

根据AlienWebguy的建议，详细更新：

首先，创建链接的有序列表和选项卡的容器。每个链接都有一个唯一的id：

html:

正如我提到的，这是一个相当琐碎的实现。例如，这将允许您多次单击同一链接，并为每个单击事件打开一个新选项卡。您可以修改单击事件来处理此问题；e、 g：为每个div生成一个id，并执行一个条件语句。打开新选项卡时，您可能还希望最小化或删除其他选项卡。同样，您的实现取决于您想要做什么；在后一种情况下，您可以添加

$（'#chat stage'）.empty（）到单击事件的第一行

希望这能有所帮助：）
哇，这真是太棒了，非常感谢！=）请始终张贴结果代码以及小提琴链接。如果链接停止工作，你的答案对其他人将毫无用处。@AlienWebguy Yes。。说得好！我不知道为什么我一开始没有这么做；我想已经很晚了。答案已更新。干杯
<!-- links to contacts or whatever -->
<ul id="chat-links">
    <li><a id="foo" href="#">foo</a></li>
    <li><a id="bar" href="#">bar</a></li>
    <li><a id="baz" href="#">baz</a></li>
</ul>

<!-- container for your tabs -->
<div id="chat-stage"></div>

// click event
$('#chat-links a').click(function() {
    // personalised message
    var str = "Hi, " + this.id + ", what's up?";
    // append a new div to your tab container
    $('#chat-stage').append('<div class="chat-window">' + str + '</div>');
});

#chat-stage
{
    position: absolute;
    bottom: 0px;  
}

.chat-window
{
    border: 1px solid #ccc;
    height: 100px;
    float: left;
    margin-right: 8px;
    padding: 8px;
    width: 100px;  
}