处理随着选项卡变化而变化的 DIV 高度答案

【问题标题】：Handling Height of DIV that changes with tab change处理随着选项卡变化而变化的 DIV 高度
【发布时间】：2012-12-25 17:55:38
【问题描述】：

我有一个带有四个子 div 的顶部 div 的选项卡式设置——单击选项卡使用 jquery 显示/隐藏内容，方法是将新 div 从 display:none 更改为 display:block 并将旧 div 更改为显示：没有任何。我发现这种方法并不令人满意，因为有时可见的新 div 的高度比旧的要小，如果向下滚动，页面会“跳转”到页面的新底部。

什么是最好的方法来改变这种行为，以免发生跳跃 - 例如。尽管切换，div 高度仍保持不变？

【问题讨论】：

您是否尝试过 JQuery UI 选项卡小部件 jqueryui.com/tabs 固定内容高度（CSS 选项卡内容属性高度固定和溢出自动）？
不——这是我继承的东西，所以更换一个新的标签系统将是一项不小的工作。

标签： jquery html height

【解决方案1】：

新内容加载后，设置新的滚动条位置。

//Permits to reset the scrollbar to the top
$('#content-div').scrollTop(0);

//Permits to reset the scrollbar to the bottom
$('#content-div').scrollTop($('#content-div').height());

您还可以存储当前位置并在内容加载后应用。

我不知道您如何加载新内容。我假设您使用的是 JQuery load 函数：

$('#content-div').load('new.php',function(){
    $(this).scrollTop(0);
});

【讨论】：