使用jquery和css生成选项卡

Question

我正在努力制作像GMail或Facebook聊天窗口底部的栏。 我不是想尝试聊天服务或其他任何内容。

在Facebook的聊天中，当您点击朋友时，可见页面底部会显示一个矩形块，并在其上显示您的朋友姓名以及聊天记录。

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

我是否必须为每个选项卡生成第1个选项卡，然后设置display：none，然后当我想生成选项卡时，请使用[请原谅下面的不良语法]

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

Answer 1

如果我理解正确...你不必创建标签，因为你可以动态创建它们。看看这个jsfiddle是否有一个简单的实现。

修改

根据AlienWebguy的建议更新细节：

首先，为您的标签创建有序的链接列表和容器。每个链接都有一个唯一的ID：

HTML：

<!-- 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事件。每次点击活动都会在“聊天窗口”div中创建个性化消息：

jQuery的：

// 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>');
});

然后设置元素的样式：

的CSS：

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

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

正如我所提到的，这是一个非常简单的实现。例如，这将允许您多次单击同一链接并为每个单击事件打开一个新选项卡。您可以修改click事件来处理这个问题;例如：为每个div生成一个id并执行一个条件。您可能还希望在打开新选项卡时最小化或删除其他选项卡。同样，您的实施取决于您想要做什么;在后一种情况下，您可以将$('#chat-stage').empty();添加到点击事件的第一行。

希望这有帮助:)