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。

Thnx寻求帮助。

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' } });

});

我是怎么做到的：

点击后，我们会点击所点击的元素li的父.index()+1 a（因为它基于零）。
我们只是寻找div #tab(+ that index number)
我们计算他的身高，我们把它放入var 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');

    });

Jquery（制表符系统）计算高度并为div添加高度

1 个答案:

编辑您的评论：