3

この奇妙な問題があります: メニューとコンテンツの 2 つの div があります。

<div id="menu">
  <a href="#" id="link1"> Link </a>
  <a href="#" id="link2"> Link </a>
</div>

<div id="content">
</div>

リンクをクリックすると、divにさまざまな html ファイルのコンテンツが読み込まれます。

$('#link1').click(function() {
  $('#content').load('page1.html');
}
$('#link2').click(function() {
  $('#content').load('page2.html');
}

...そしてそれは動作します:-)

このように、#contentは html ファイルで「満たされている」ため、その高さが変わります。#menu が #contentと同じ高さになるようにしたいので、追加しました

$("#menu").height($("#content").height());

click() 関数では、#content の高さはファイルをロードする前に計算されるため、機能しません。コンテンツがいつ読み込まれたかを検出し、その後サイズ変更を行うにはどうすればよいですか?

PS: 問題はページの読み込みにもあります: 追加しました

$('#prod1').click();

$(window).load 内で、最初のメニュー項目のクリックをシミュレートします。#content は正しく入力されていますが、高さの計算が間違っています.divの高さをトレースしてconsole.logでデバッグしようとしましたが、load関数の後に入れましたが、0になりました。

唯一の (悪い) 解決策は、setInterval関数を使用して #content の高さを継続的に監視し、#menu で同じ高さを設定することでした。

4

2 に答える 2

3

コールバック関数を使用できます。

$('#link1').click(function(e) {
   e.preventDefault();
   $('#content').load('page1.html', function(){
      // ...
   });
});

ただし、画像をロードしている場合は、それらの画像に対して発生するイベントをリッスンする必要があります。そうしないと、高さが正しく計算されません。 imagesLoadedloadのように使用できるプラグインがいくつかあります。

于 2013-02-20T17:40:35.550 に答える
-1

私はあなたがこのようなことをするべきだと$("#menu").css('height', $("#content").height() + 'px');思い#contentます

于 2013-02-20T17:39:12.427 に答える