使用jquery和css生成选项卡

Question

我正在尝试在Gmail或Facebook的聊天窗口底部创建类似栏的内容。 我不是想做一个聊天服务或任何类似的东西。

在Facebook的聊天中，当你点击一个朋友时，在可见页面的底部会形成一个矩形块thingy，并在其上有你的朋友名字以及聊天记录。

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

我将不得不生成每一个然后设置显示选项卡1：没有，然后当我要生成一个标签，使用[请原谅下面的可怜语法]

$(##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> 

然后，创建为每个链接的点击事件。每一次点击事件将创建一个个性化的消息 '聊天窗口' 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; 
} 

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

希望这会有所帮助:)