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

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

Answer 2

如果将$('.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()函数

如果您手动更改标签，请在更改标签后调用该功能

jQuery等高和动态内容

2 个答案: