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

Question

我有一个标签系统 (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 的高度比选项卡系统大。所以我需要每次都计算标签系统高度，然后将此高度添加到列 div。

感谢您的帮助。

Answer 1

$(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 #tab(+ that index number)
• 我们计算他的身高并将其放入变量getTabHeight
• 比我们刚才animate的列要计算的height！

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

编辑您的评论：

    $('.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');

    });