2

我正在使用 node JS，我们建立了一个完美的聊天，现在我们正在转向它的 CSS 部分。

现在我遇到的问题是，当我们有多个选项卡时，我们只单击一个，所有选项卡都会向上移动。

这可以在下面的图片中查看。红色区域是div选项卡所在的区域，显示它们应该能够使用 CSS 向下移动

前

单击 1 个选项卡后

再次单击选项卡以向您显示我的 jQuery 部分是正确的

这是位于页面底部的固定 div

下面的代码针对每个选项卡重复，但具有不同的 id 、tramsTalk、Calvin，srcc-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 不会对每个重复，而是实际上将它们全部包裹起来。如果是这样，那么您遇到的行为就是我所期望的，因为一旦放大一个选项卡，固定 div 的高度就会扩展，所有标题都会随之上升。你从这样的东西开始（为了说明的目的，我缩小了宽度）。您单击并扩展一个的高度并得到类似这样的东西。可能解决它的一种方法是em在 div 上设置单位高度，同样设置扩展大小，以便您可以margin-top 像这样进行控制。

我在这里假设您的fixeddiv 不会真正具有红色背景，但实际上将是透明的（红色是为了说明）。如果不是这样，那么您需要将每个元素单独设置为一个fixed位置，但是您将无法使用float它们。

于 2012-04-27T01:05:11.053 回答
0

我认为您不需要调整控股 div 中任何子选项卡上的位置，因为它们的位置可以由控股 div 的位置决定。（或者至少vertical-align: bottom在每个子选项卡上放一个/窗口/聊天框）

所以你会有类似的东西：

<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 回答