javascript jQuery Equal Heights和Dynamic Content

brgchamk  于 2023-09-29  发布在  Java
关注(0)|答案(3)|浏览(90)

我发现了下面的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);
    });
});
1yjd4xko

1yjd4xko1#

如果你将$('.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()函数
如果您手动更改选项卡,只需在更改选项卡后调用函数

5cnsuln7

5cnsuln72#

您应该将此代码/函数添加到change-tab事件中。因为这段代码只会在加载时运行。

zed5wv10

zed5wv103#

//这里是代码
$(文档).就绪(函数(){

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

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

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

});
//请将“equal_height_div”类改为您的div类

相关问题