-5

HTML で Web サイトを開発しています。10 個の異なる HTML ページがあります。メニューバーは各ページに表示する必要があります...つまり、メニューバーの下のdivコンテンツを変更する必要があります...メニュー項目をクリックした後、htmlページをそのdivにロードする必要があります..

4

2 に答える 2

6
  1. 完全なマークアップを作成します (正しい doctype を使用)。
  2. jQuery をページに追加します。
  3. ドキュメントの準備が整うまで待ちます。
  4. clickナビゲーション リンクにイベント ハンドラーを添付します。
  5. リンクのデフォルトの動作を無効にします。
  6. 目的のページを ajax で読み込み、受け取ったデータをコンテナに挿入します。
<!doctype html>
<html>
<head>
    <title>My Ajax Website</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script>
        $(function () {
            $('#nav a').on('click', function (e) {
                e.preventDefault();
                var page = $(this).attr('href');
                $('#content').load(page);
            });
        });
    </script>
</head>
<body>
    <div id="nav">
        <a href="page1.html">Page 1</a>
        <a href="page2.html">Page 2</a>
        <a href="page3.html">Page 3</a>
        <a href="page4.html">Page 4</a>
        <a href="page5.html">Page 5</a>
    </div>

    <div id="content">
        Welcome! Use the menu to navigate website.
    </div>
</body>
</html>
于 2013-06-11T06:23:33.587 に答える