jQuery 等高和动态内容

Question

我发现了以下 jQuery，它非常适合当您从一个选项卡单击到另一个选项卡时在页面上加载的网格中没有动态内容的页面。默认情况下，网格的一个选项卡部分将使用下面的 jQuery 正确调整等高，但是当用户单击其他选项卡之一将其他内容加载到网格中时（其中网格包含更多内容） ），等高jQuery不会调整，导致网格中的内容解释超出页脚或网格外部和下方的其他内容。

有人可以帮助我使用提供的 jQuery 来动态调整等高吗？

谢谢！

$(document).ready(function () {
    $('.content').each(function () {
        var highestBox = 0;
        $('.equalcontentcolumn', this).each(function () {
            if ($(this).height() > highestBox)
                highestBox = $(this).height();
        });

        $('.equalcontentcolumn', this).height(highestBox);
    });
});

Answer 1

如果将

$('.content).each

块包装在函数中，则可以在需要时调用该函数来重新应用高度均衡，例如单击选项卡时，例如

$(document).ready(function () {

    function equaliseIt() {
        $('.content').each(function () {
            var highestBox = 0;
            $('.equalcontentcolumn', this).each(function () {
                if ($(this).height() > highestBox)
                    highestBox = $(this).height();
            });

            $('.equalcontentcolumn', this).height(highestBox);
        });
    }

    //call the function at page load
    equaliseIt();  
});

您如何更改标签？您是使用插件还是手动执行？

如果使用插件，您可能可以访问

tabchange

事件或类似事件，该事件将在选项卡更改后触发，因此您可以使用它来调用

equaliseIt()

函数

如果您手动更改选项卡，只需在更改选项卡后调用该函数

Answer 2

您应该将此代码/函数添加到更改选项卡事件中。因为此代码只会在加载时运行。

Answer 3

$(文档).ready(函数(){

    var title_height = 0;
    $('.equal_height_div').each( function() {

        var _hg = $(this).height();
        if( parseFloat(_hg) > parseFloat(title_height)  ){
            title_height = _hg;
        }

    });
    $('.equal_height_div').height(title_height);

}）； //请将“equal_height_div”类更改为您的div类