Javascript 仅当某个div'；s高度为>；超过设定高度？

我创建了一个选项卡模块，它具有可滚动的内容区域。我制作了一个快速闪烁箭头样式，让用户知道这个框是可滚动的。我想让这个div只有在我的内容（可滚动文本框区域）高于某个高度时才可见

例如，我的可滚动区域始终设置为

高度：450px

。因此，我需要一种方法来计算如何获得内容区域的高度，如果高度小于450px，则不显示我的div

more info

下面是一个演示

HTML结构

<div class="tabs-left app-about-page">
      <div class="more-info"></div>
        <ul class="nav nav-tabs">
          <li class="active"><a href="#a" data-toggle="tab"><span class="glyphicon glyphicon-heart">Donor Acquisition</span></a></li>
          <li><a href="#b" data-toggle="tab"><span class="glyphicon glyphicon-star">Donor Cultivation</span></a></li>
          <li><a href="#c" data-toggle="tab"><span class="glyphicon glyphicon-headphones">Donor Retention</span></a></li>
          <li><a href="#d" data-toggle="tab"><span class="glyphicon glyphicon-time">Donor Blogging</span></a></li>
          <li><a href="#e" data-toggle="tab"><span class="glyphicon glyphicon-calendar">Donor Engagement</span></a></li>
        </ul>

        <div class="tab-content">
          <div class="tab-pane active" id="a">
          </div>


          <div class="tab-pane" id="b">
          </div>


          <div class="tab-pane" id="c">
            </div>

          <div class="tab-pane" id="d">
          </div>

          <div class="tab-pane" id="e">
          </div>

        </div><!-- /tab-content -->
      </div><!-- /tabbable -->

---

我不确定，但我又四处看了看，发现了这个

var clientHeight = document.getElementById('myDiv').clientHeight;

这两者的结合

[DIV].style.visibility='visible'

[DIV].style.visibility='hidden' 

然后使用if语句

---

对编码来说有点陌生，但也许这是对的

您可以将一个事件绑定到菜单锚定中，该锚定将检查活动div的高度与该div的滚动高度，并显示或隐藏闪烁箭头

使用JQuery，类似于以下内容，以便在引导完成后触发：

 $(document).ready(function(){

$('a[data-toggle="tab"]').on('shown.bs.tab', function (){
    ToggleMoreInfoArrow();
     //Call the toggle every time the content changes.
    });

ToggleMoreInfoArrow(); //Call it the first time the page loads.
});

function ToggleMoreInfoArrow()
{
        if( $('div.active').prop('scrollHeight') < $('div.active').height())
        {
            $('.more-info').hide();
        }
        else
        {
            $('.more-info').show();
        }
}

$（文档）.ready（函数（）{
$（'a[data toggle=“tab”]”）on（'show.bs.tab'，function（）{
切换MoreInfoArrow（）；
//每次内容更改时调用切换。
});
ToggleMoreInfoArrow（）；//第一次加载页面时调用它。
});
函数ToggleMoreInfoArrow（）
{
if（$（'div.active'）.prop（'scrollHeight'）<$（'div.active'）.height（））
{
$（'.more info'）.hide（）；
}
其他的
{
$（'.more info'）.show（）；
}
}

编辑：我不确定你的“活动”类是如何设置的，但是你希望在设置之后运行高度检查代码。这可能是在页面加载或任何地方，

if

语句是重要的一位

---

编辑：查看此工作小提琴：

首先，启动您的

。更多信息

类隐藏在css中。
然后，您可以在每次可见选项卡更改时检查选项卡内容的高度，如果它大于450px，则交换“更多信息”按钮的可见性

这是jQuery代码段：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    var div = $($(e.target).attr('href'));

    $('.more-info').hide();
    if (div.get(0).scrollHeight > 450)
        $('.more-info').show();
});

---

只需使用

show.bs.tab

事件来显示和隐藏箭头div

已显示。bs.选项卡

显示选项卡后，在“选项卡显示”时激发此事件。使用event.target和event.relatedTarget分别以活动选项卡和上一个活动选项卡（如果可用）为目标

$（'.more info'）.css（'display'，'none'）；
$（'a[data toggle=“tab”]”）on（'show.bs.tab'，函数（e）{
var activeContentElem=$（$（e.target.attr（'href'））；
如果（activeContentElem[0].scrollHeight>activeContentElem.height（））{
$（'.more info'）.css（'display'，'block'）；
}否则{
$（'.more info'）.css（'display'，'none'）；
}
})

.nav选项卡{
浮动：左；
边界底部：0；
}
.nav tabs li{
浮动：无；
保证金：0；
宽度：106px；
高度：106.5px；
左：-30px；
顶部：-20px；
位置：相对位置；
显示：块；
背景色：#f2f0；
边际上限：0；
边框底部：#FFF 2px实心；
文本对齐：居中；
-webkit转换：所有0.3s线性0；
-moz转换：所有0.3s线性0；
-ms转换：所有0.3s线性0；
-o-过渡：所有0.3s线性0；
过渡：所有0.3s线性0；
}
.导航标签李：最后一个孩子{
边界：无；
}
.导航标签李a{
显示：块；
高度：75px；
位置：相对位置；
填充顶部：31px；
字体大小：14px；
颜色：rgb（51,51,51）；
文字装饰：无；
}
.导航标签li：悬停{
背景色：#dbda；
光标：指针；
}
.nav选项卡>li.active、.nav选项卡>li.active a、.nav选项卡>li a:active、.nav选项卡>li.active>li:focus、.nav选项卡>li a:focus{
背景：rgba（51181229,0.45）；
颜色：#FFF；
文字装饰：无；
}
.选项卡内容{
左边距：45像素；
}
.选项卡内容.选项卡窗格{
显示：无；
背景色：#fff；
填充：0；
溢出y：自动；
}
.选项卡窗格p{
利润率：0.16px 0；
}
.选项卡窗格p：第一个子级{
利润率：5px16px；
}
.选项卡窗格h1{
垫底：5px；
边框底部：1px实心#dbda；
边缘底部：16px；
}
.选项卡窗格img{
最大宽度：70%；
}
.选项卡内容.活动{
显示：块；
溢出：滚动；
高度：450px！重要；
填充：0px 15px 0 0px；
}
.列表组{
宽度：100%；
}
.列表组.列表组项{
高度：50px；
}
.list group.list group项目h4、.list group.list group项目范围{
线高：11px；
}
@-webkit关键帧circleBounce{
0%{-webkit变换：比例（0.9）；不透明度：0；}
20%{不透明度：0.5；}
50%{不透明度：1；}
80%{不透明度：0.5；}
100%{-webkit变换：比例（1.1）；不透明度：0；}
}
.更多信息{
位置：绝对位置；
底部：30px；
左：计算（50%-3倍）；
宽度：6px；
高度：6px；
边框：2个实心rgb（51181229）；
边界顶部：无；
左边界：无；
-webkit变换：旋转（45度）；
-webkit转换来源：50%50%；
}
.更多信息：之后{
内容：“；
显示：块；
位置：绝对位置；
顶部：钙（50%-17px）；
左：计算（50%-17px）；
宽度：35px；
高度：35px；
边框：1px实心rgba（255255.8）；
边框：1px实心rgb（51181229）；
边界半径：50%；
-webkit动画：circleBounce 2.5s线性无限；
}
。更多信息：悬停：之后{
背景色：rgba（5118122915）；
游标：继承；
}

供体获取
Lorem ipsum dolor sit amet，是一位杰出的献身者。连续舌苔。莫比·达皮布斯告诉我们一个同侧索利西丁。这是一个错误。一个元素，一个暂时的空。毛里斯·毛里斯·莱克图斯、蒂尼杜特和普勒斯·朗卡斯、埃利芬德·康瓦利斯·图皮斯

Lorem ipsum dolor sit amet，是一位杰出的献身者。连续舌苔。阿里的同侧肢体
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    var div = $($(e.target).attr('href'));

    $('.more-info').hide();
    if (div.get(0).scrollHeight > 450)
        $('.more-info').show();
});

function checkHeightAndSetMore(clickedMore){
    var activeTabH=$('.tab-content .active').height();
    if(activeTabH >450){
      $('div.more-info').fadeIn();
    }
    else{
    $('div.more-info').fadeOut();
    }
    if(clickedMore == 1){
        $('.tab-content .active').css('overflow-y', 'auto');
        $('div.more-info').fadeOut();
    }

}
$(document).ready(function(){
checkHeightAndSetMore(0);
    $('.more-info').click(function(){        
       checkHeightAndSetMore(1);
    });
});