0

我找到了以下 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);
    });
});
4

2 回答 2

0

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

于 2012-11-27T14:15:02.117 回答
0

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

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

于 2012-11-27T14:17:25.910 回答