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.

Спасибо за помощь.

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)
• вычисляем его высоту и помещаем в переменную 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');

    });