3

現在、1つのhtmlファイルに複数のページが埋め込まれており、各ページの下部に別のページに移動するためのナビゲーションバーがあります。

ただし、異なるページのナビゲーション バーは、異なる位置にある同一のコードです。したがって、ナビゲーションバーの小さな詳細を編集すると、それらのすべての位置で (同じ) コードを変更する必要があります。さらに、この方法で実装すると、ナビゲーション バー ボタンのハイライトが正しく動作しません。

実際、navbar のコードは同じです。それらはすべて同一の div タグ内にあります。したがって、これらすべてのナビゲーション バーに対して 1 つのコードを再利用する方法が必要だと思いますか? ナビゲーションバーの詳細を変更するたびにコードを何度も編集する必要がないようにするには? (10ページ以上だと大変なことになる)

4

1 に答える 1

2

JavaScript を使用して、初期化時に各ページに要素を追加できます (このコードがすべての HTML ドキュメントに含まれていることを確認してください)。

$(document).on('pageinit', '[data-role="page"]', function () {
    $(this).children('[data-role="content"]').append('<div class="my-nav-bar">...</div>');
});

.append()次に、関数呼び出しで navbar の HTML を追加します。これにより、コードの 1 つのコピーを保持し、サイト内のすべてのページで使用することができます。

これには、ページごとではなく、ユーザーが一度だけコードをダウンロードする必要があるという追加の利点があります。

于 2012-05-07T23:23:40.620 に答える