1

次のような 2 つの div を持つ index.html という HTML ページがあります。

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/mystyle.css" media="all" />
        <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
        <script language="javascript">
        $('#menu1').click(function(){
            $("#content").load( "new_content.html" );
        });
        </script>
    </head>
    <body>
        <div id="menu">
            <ul>
                <li id="menu1">menu item 1</li>
                <li>menu item 2</li>
                <li>menu item 3</li>
            </ul>
        </div>
        <div id="content">
            Hello World
        </div>
    </body>
</html>

これを含む new_content.html という 2 番目の HTML ページもあります。

<h1>This is new content</h1>
<span class="blue">This line should be blue</span><br />
<span class="red">This line should be red</span>

mystyle.css ファイルには次のものが含まれています。

.blue {
    color: blue;
}

.red {
    color: red;
}

私が遭遇する最初の問題はクロムでのみ発生し、2番目の問題はすべてのブラウザーで発生します。「メニュー項目 1」リスト要素をクリックすると、コンテンツ div が更新され、H1 タイトルとその下の 2 行が表示されますが、次の 2 つの問題が発生します。

  1. 2本の線が黒く、cssが適用されていません
  2. ブラウザで右クリックしてビュー ソースを使用すると、コンテンツ div に古いコード、つまり「Hello World」が含まれます。

したがって、H1 タイトルとその下の 2 行がはっきりと見えるので、これにはやや困惑していますが、css は適用されておらず、ブラウザーは変更が行われていないと認識しているようです。

多分私は何かが欠けている、私はjQueryにかなり慣れていない、そしておそらくload()関数はこのように使用されることを意図していません.

この件についてご教示いただけると幸いです。

よろしくクルーズ

4

2 に答える 2

0

コードを IE10、FF、Chrome、Safari で試してみたところ、CSS はすべて正常に機能していました。（すべてをローカルマシンにコピーしました）

問題 1 について: CSS ファイルを正しくロードしていることを確認してください。[パスに問題がある可能性があります]class="blue"外部ロードの前に存在するコンテンツの一部に割り当てることで、非常に迅速にチェックでき、適用されるかどうかを確認できます。

何かのようなもの：

    <ul>
        <li id="menu1" class="blue">menu item 1</li>
        <li>menu item 2</li>
        <li>menu item 3</li>
    </ul>

問題 2 について: これはまったく正常です。HTML ソース コードは元の HTML であり、DOM のみが変更されています。-これらの変更は、任意のブラウザーのページ インスペクターで確認できます。

編集：（あなたのコメントのため）

どうやら、これはブラウザのキャッシュ (すべてが黒のときにブラウザが古いスタイルを保存していた) が原因で、CTRL+F5 でページを更新してすべてをリロードします。

また、「ロード」に関して：（ドキュメントから）

その他の注意事項：

ブラウザーのセキュリティ制限により、ほとんどの "Ajax" 要求は同一オリジン ポリシーの対象となります。要求は、別のドメイン、サブドメイン、またはプロトコルからデータを正常に取得できません。

于 2013-09-23T13:31:05.890 に答える
0

これを試して：

$('#contentPagina').load(nombrePagina,function(){ $('#contentPagina').trigger('create'); });
于 2014-09-22T19:17:06.883 に答える