jqueryとcssでタブを生成する

Question

私はGMailやFacebookのチャットウィンドウの下部にあるバーのようなものを作ろうとしています。 私はチャットサービスやそのようなものを作るつもりはありません。

facebookのチャットでは、友達をクリックすると、表示されるページの一番下に四角いブロックが形成され、友達の名前とチャットの履歴が表示されます。

私はあなたがそれを作ることができるので、あなたがそれらのそれぞれをクリックし、あなたのページの一番下でクリックしたもののそれぞれの情報を持つタブを生成することができるようにすることができますか？どれも、私はタブを生成するときに、使用私は理解していれば

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

Answer 1

[以下の貧困層の構文を許してください]：

私はタブの各1、次に設定表示のための第一を生成する必要がありますあなたは正しく...タブを作成する必要はありません。簡単な実装のためにこのjsfiddleを見てください。

EDIT詳細を更新

、AlienWebguyの提案どおり：

まず、リンクとあなたのタブのコンテナのあなたの順序付きリストを作成します。その後

<!-- 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> 

、各リンクのクリックイベントを作成します。

HTMLを：各リンクは、一意のIDを持っています。私のよう

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

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

：

CSS：

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

はその後の要素のスタイル：

のjQuery：各クリックイベントが「チャット・ウィンドウのdivの内側にパーソナライズされたメッセージを作成します。これはかなり簡単な実装です。たとえば、同じリンクを何回かクリックし、クリックイベントごとに新しいタブを開くことができます。あなたはこれに対処するためにclickイベントを修正することができます。例：各divのidを生成し、条件を実行します。また、新しいタブを開くときに、他のタブを最小化または削除することもできます。繰り返しますが、あなたの実装はあなたが何をしたいかによって異なります。後者の場合、クリックイベントの最初の行に$('#chat-stage').empty();を追加することができます。

希望します。