3

これまでjQueryを使用したことはありませんが、何をしようとしているのかを説明します。

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>My Awesome Website</title>
        <link href="style.css" rel="stylesheet" type="text/css"/>
        <link rel="shortcut icon" href="/favicon.ico" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    </head>
    <body>

<!--    <iframe width="100%" height="175" frameborder="0" scrolling="no" src="navbar.html"></iframe> I used to use this - but i cant have dropdown menus. -->
            <!-- This is my problem -->
        <script>
                $('#navbar').load('./navbar.html');
        </script>
        <noscript>
            <h1>Please enable Javascript!</h1>
        </noscript>

        <div id="container">
                <!-- Content Here -->
        </div>

    </body>
</html>

navbar.html

<div id="navbar">
        <li><object width="64" height="64" data="favicon.svg" type="image/svg+xml"></object></li>
        <li><object width="64" height="64" data="icons/tech.svg" type="image/svg+xml"></object></li>
        <li><object width="64" height="64" data="icons/games.svg" type="image/svg+xml"></object></li>
        <li><object width="64" height="64" data="icons/contact.svg" type="image/svg+xml"></object></li>
</div>

ここで私がやろうとしているのは、多くの HTML ページがすべて1 つの navbar html ページにリンクしているため、navbar.html を変更するときにすべてのページを変更する必要がないということです。

ここですでに別の質問があります。Davor Milnaricは、「jquery を使用している場合は、'.load()' 関数で試すことができます。api.jquery.com/load」と提案しましたが、機能させることができません。私は何を間違っていますか？どうすれば修正できますか？どんな助けでも大歓迎です。

4

2 に答える 2

11

次の 2 つのことを行う必要があります。

  1. $(document).ready() を使用 -ここを読む; すべての jQuery コードは、次のようにラップする必要があります。

    $(document).ready(function(){

    //jquery code goes here....        

});

  2. 変化する

    $('#navbar').load('./navbar.html');

に

$('#container').load('./navbar.html');

.. id="navbar" を持つ要素がなく、これによれば:

セレクターによって一致する要素がない場合 (この場合、ドキュメントに id="result" (この場合は "navbar" ) を持つ要素が含まれていない場合)、Ajax リクエストは送信されません。

于 2013-05-26T02:00:19.630 に答える