0

次の jQuery を見つけました。これは、タブからタブへクリックするときにページに読み込まれるグリッドに動的コンテンツがないページでうまく機能します。グリッドの 1 つのタブ付きセクション (デフォルト) は、以下の jQuery を使用して同じ高さを正しく調整しますが、ユーザーが他のタブの 1 つをクリックして他のコンテンツをグリッドにロードすると (グリッドにはより多くのコンテンツがあります) )、同じ高さの 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

ブロックを関数でラップする$('.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 に答える
0

このコード/関数を change-tab イベントに追加する必要があります。このコードはロード時にのみ実行されるためです。

于 2012-11-27T14:15:02.117 に答える