2

私はノードJSを使用していて、完璧に機能するチャットを作成しました。現在、そのCSS部分に移行しています。

今私が抱えている問題は、複数のタブがあり、1つだけクリックすると、すべてのタブが上に移動することです。

これは下の画像で見ることができます。赤い領域はdiv、タブがCSSで下に移動できることを示している

前

1つのタブをクリックした後

もう一度タブをクリックして、jQueryの部分が正しいことを示します

これは、ページの下部にある固定divです。

以下のこのコードは、画像に示されているように、tramsTalkタブごとに繰り返されますが、IDは異なります。Calvinsrcc-test

<div style="position:fixed;bottom:0;right:26px;background-color:red;">
    <div id="tramsTalk_chat" style="background-color:white;position:relative;bottom:0px;width:275px;float:right">
        <div id="tramsTalk_chat_header" class="chat_header"><p><i class="icon-chevron-up icon-white pull-right"></i>tramsTalk</p></div>
        <div class="overflow_chat" id="tramsTalk_chat_textarea"><hr style="margin-top:-8px;margin-bottom:1px;"></div>
        <div class="chat_textarea_holder" id="tramsTalk_msg_textarea_holder"><textarea class="chat_box" rows="3" id="tramsTalk_msg" ignoreesc="true" name="tramsTalk_chat_message" onkeyup="check(this,event);" style="resize: none; overflow-y: hidden; "></textarea></div>
    </div>
</div>

私はこれがうまくいくと思いました、そしてそれはまだタブを一番上に保ちます。

言い換えると：

jQueryは正常に機能しています。切り替えますが、タブを上に移動しますが、タブはまだ下に固定されているはずです。（クリックすると、テキストボックスがプルダウンされます）。CSSが問題だと思いますが、よくわかりません。

解決

<style>
.wrappers > div {
   margin-top: 275px;
}

.active {
    height: 300px;
    background-color: white;
    margin-top: 0 !important;
}
</style>

<script type="text/javascript">
$(document).ready(function(){
$('#Calvin_chat').click(function(){
   alert('test');
   $(this).attr('class','active');
});});
</script>

チャームのように機能します!!!

4

2 に答える 2

2

「以下のコードはタブごとに繰り返されますが、IDは異なります」と述べ、次のように指定します。

<div style="position:fixed;bottom:0;right:26px;background-color:red;">
    <div id="tramsTalk_chat" style="background-color:white;position:relative;bottom:0px;width:275px;float:right">
        <div id="tramsTalk_chat_header" class="chat_header"><p><i class="icon-chevron-up icon-white pull-right"></i>tramsTalk</p></div>
        <div class="overflow_chat" id="tramsTalk_chat_textarea"><hr style="margin-top:-8px;margin-bottom:1px;"></div>
        <div class="chat_textarea_holder" id="tramsTalk_msg_textarea_holder"><textarea class="chat_box" rows="3" id="tramsTalk_msg" ignoreesc="true" name="tramsTalk_chat_message" onkeyup="check(this,event);" style="resize: none; overflow-y: hidden; "></textarea></div>
    </div>
</div>

私の推測では、あなたの画像とあなたが述べている行動から私が見たものに基づいて、あなたは本当にこれを持っていると思います（私は説明のために内臓を排除しました）：

<div style="position:fixed;bottom:0;right:26px;background-color:red;">
    <div id="tramsTalk_chat" style="background-color:white;position:relative;bottom:0px;width:275px;float:right">
    </div>
    <div id="sccr_test_chat" style="background-color:white;position:relative;bottom:0px;width:275px;float:right">
    </div>
    <div id="Calvin_chat" style="background-color:white;position:relative;bottom:0px;width:275px;float:right">
    </div>
</div>

つまり、fixed配置されたdivはそれぞれに対して繰り返されるのではなく、実際にはすべてをラップします。もしそうなら、あなたが経験する振る舞いは私が期待するものです。なぜなら、1つのタブが拡大されると、固定divの高さが拡大し、すべての見出しがそれに伴って上がるからです。あなたはこのようなものから始めます（私は説明のために幅を狭めました）。クリックして高さを拡大すると、次のようになります。おそらくそれを解決する1つの方法はem、divに単位の高さを設定し、同様に拡張サイズを使用して、margin-top このように制御できるようにすることです。

fixedここでは、 divの背景が実際には赤ではなく、実際には透明になると想定しています（赤は説明用でした）。そうでない場合は、各要素を個別にfixed位置にする必要がありますが、そうするとできなくなりfloatます。

于 2012-04-27T01:05:11.053 に答える
0

サブタブの位置は保持 div の位置によって決定できるため、保持 div 内のサブタブの位置を調整する必要はないと思います.. (または、少なくともvertical-align: bottom各サブタブに/window/チャットボックス)

したがって、次のようなものになります。

<div style="position: fixed; bottom: 0; right: 26px; background-color:red">
    <div id="tramsTalk_chat" style="vertical-align: bottom">
    </div>
    <div id="sccr_test_chat" style="vertical-align: bottom">
    </div>
    <div id="Calvin_chat" style="vertical-align: bottom">
    </div>
</div>
于 2012-04-27T02:28:07.410 に答える