Javascript Jquery（选项卡系统）计算高度并将高度添加到div

我有一个标签系统（jQuery），里面有三个长度不同的标签。在这个选项卡旁边，我有一列，里面有一个div。我想，如果您单击选项卡2，则列中的div将缩放高度，而当您单击选项卡1时，他将向后缩放

我所拥有的：

$(".multidomain a").click(function() {
    $(".main-vervolg.right .left .domain").animate({ height: '317px'}, 400).css('overflow-y','scroll');
});

$(".signledomain a").click(function() {
    $(".main-vervolg.right .left .domain").animate({ height: '247px'}, 650).css('overflow-y','scroll');
});

$(".domeinnaam a").click(function() {
    $(".main-vervolg.right .left .domain").animate({ height: '924px'}, 650).css('overflow-y','scroll');
});

这在Chrome中运行得非常完美，但在不同的浏览器中，有时列div的高度要比tab系统大。所以我需要一些东西，每次都计算tab系统的高度，然后将这个高度添加到列div中

谢谢你的帮助

$(document).ready(function(){

    $(".tabnav li a").click(function(){  
        var thisNav = $(this);   
        var thisNavIndex = thisNav.parent().index()+1;
        var getTabHeight = $('#tab'+ thisNavIndex).height();        
       $(".main-vervolg.right .left .domain").animate({ height: getTabHeight+'px'}, 650).css('overflow-y','scroll');

        // delete this test//
        $('#test').html( ' The tab height is: '+ getTabHeight +' || The button nav index +1 is: '+ thisNavIndex );  
    });

    // PRODUCTEN TABS
    $('.tabs > ul').tabs({ fx: {  opacity: 'toggle' } });

});

我是如何做到的：

• 单击后，我们将获得所单击元素

  a

  的父级

  li

  .index（）+1（'因为它是零基的）
• 然后我们只需查找div

  #选项卡（+该索引编号）

• 我们计算他的身高，并将其放入var

  getTabHeight

• 我们只需将列设置为

  高度的动画
  
  

就这样！ 快乐的编码，让我知道结果，或者如果你遇到一些问题

编辑您的评论：

---

您可以提供一个带有html结构的JSFIDLE或jsBin预览吗？这看起来不错，在什么浏览器中有问题？完成。看看我下面的答案。太好了，thnx:）我怎样才能将div.top添加到高度？@Maanstraat，看看上面。（我很高兴这有帮助！）@Maanstraat——正如我刚才所说，这里添加了一个

if

语句：如果元素已经在屏幕上，则防止单击如果（$（'#tab'+thisNavIndex）.is（':visible'）{return false；}`看上面，我重新编辑了答案！如果现在一切都好了，请告诉我！

    $('.tabnav li a').click(function(){

        var thisNav = $(this);
        var thisNavIndex = thisNav.parent().index()+1;
        var getTabHeight = $('div#tab'+ thisNavIndex).height();
        var heightRemake = ( $('.top').height()+48 ) + getTabHeight;

        if($('#tab'+ thisNavIndex).is(':visible')) {
            return false;
        }
        $(".main-vervolg.right .left .domain").animate({ height: heightRemake+'px'}, 650).css('overflow-y','scroll');

    });