1

ドキュメントの準備ができたら、コンテンツ div 内でページを読み込みます。ただし、ユーザーがクリックするたびに、異なるページを同じコンテンツ div にロードするリンクもいくつかあります。他の何かを制御するためにコンテンツ div の高さを設定しようとしていますが、ページの読み込み時に div の高さが設定されると、新しいページを含むコンテンツ div の新しいサイズを取得できないようです…</ p>

たとえば、読み込まれたページは 6000px、ページ 1 は高さ 500px、ページ 2 は高さ 300px です。ページが読み込まれると、コンテンツ div は 6000px に設定されます。しかし、ページ 1 をクリックしてコンテンツ div にロードすると、コンテンツ自体の高さが 500px しかないにもかかわらず、コンテンツ div は 6000px に設定されたままになり、ページ 2 も同じです…</p>

html は次のとおりです。

<div id="select">
    <div id="menu">
        <ul>
        <li><a class="load" href="javascript:void(0)" id="page1">page1</a></li>
        <li><a class="load" href="javascript:void(0)" id="page2">page2</a></li>
        </ul>
    </div>
</div>
<div id="spacer"></div>
<div id="content"></div>

CSSは次のとおりです。

#select { 
    width: 215px;
    top: 20px;
    left: 10px;
    position: absolute;
    }

#spacer {
    border-right:2px solid #000000;
    left:10px;
    width:215px;
    position: absolute;
    }

#content {
    left: 227px;
    top: 20px;
    width: 703px;
    padding: 0; 
    margin: 0;
    position: absolute;
    }

これが私のjqueryです：

$(document).ready(function() {
    //Load content on page load
    $("#content").html('<ul><li>Loading Content...</li></ul>')
                 .load("/content/" + "projects.php", null, function() {
                            contentHeight = $("#content").height();
                            selectHeight = $("#select").height();
                            $("#spacer").height(contentHeight + "px")
                                        .css({"top": selectHeight + 40 + "px" });
                 });
    //Load content on click
    $(".load").click(function(){
                    loadName = $(this).attr("id");
                    $("#content").html('<ul><li>Loading Content...</li></ul>')
                                 .load("/content/" + loadName + ".php", null, function(){
                                    contentHeight = $("#content").height();
                                    selectHeight = $("#select").height();

                                    if(selectHeight < contentHeight) {
                                    $("#spacer").css({"top": selectHeight + 40 + "px", "display": "block" })
                                                .height(contentHeight + "px");
                                    }else{        
                                    $("#spacer").css({"display": "none"}); 
                                    return;
                                    }
                    });
    });
});
4

3 に答える 3

0

2つのオプションがあります

1.)コンテンツ div 内にロードするすべてのページの高さをコンテンツ div と同じサイズにすることができます

2.) Jqueryによるその他

最初に右側のコンテンツ div $('#content').remove(); をクリアします。

$('#content').height(...) を使用して、コンテンツをロードし、ロードしたドキュメントの高さを設定します。

参照: http://api.jquery.com/height/

于 2012-05-31T09:35:15.320 に答える
0

高さを「自動」に設定してみましたか？

編集: 私はあなたが何をしていたかを見ましたが、最初は少し混乱しました (少しの CSS が大いに役立ったでしょう)。「var」を使用して変数を割り当てないことが問題を引き起こしているのではないかと思っていましたが、何らかの理由でこのスクリプトは常に機能しました。

そのため、コードを少しクリーンアップしました-値が変更されるべきではないため、selectHeightを毎回追加する理由がわかりませんでした.CSSでそれを処理することができます.絶対配置は必要ありません.

だから、これを試してください（HTMLに変更はないので、追加しませんでした）：

CSS

#spacer {
 background: #555;
 float: left;
 width: 200px;
 margin-right: 20px;
 padding: 20px;
}
#content {
 background: #444;
 float: left;
 width: 1000px;
 padding: 20px;
}

脚本

$(document).ready(function(){
 //Load content on page load
 $("#content").html('<ul><li>Loading Content...</li></ul>')
  .load("/content/" + "projects.php", null, function() {
   $("#spacer").height( $("#content").height() + "px");
  });

 //Load content on click
 $(".load").click(function(){
  var loadName = $(this).attr("id");
  $("#content")
   .html('<ul><li>Loading Content...</li></ul>')
   .load("/content/" + loadName + ".php", null, function(){
    $("#spacer").height( $("#content").height() + "px");   
  });
 });
});
于 2009-09-23T22:23:10.857 に答える
0

イベントを「ロード」ではなくクリックに変更してみてください

于 2009-09-23T10:37:28.400 に答える