0

これは非常に単純な問題だと確信していますが、それぞれに独自の「コンテンツ」があり、下部にページナビゲーションがある複数のページがあります。スクリプトのコーディングを開始して、すべてヘッド、ボディ、およびナビゲーションフッターコードを持ついくつかの異なるhtmlファイルを生成する前に...ナビゲーションフッターのインスタンスを1つだけにし、リンクで「コンテンツ」内のコンテンツのみを更新するにはどうすればよいですか？ div？

4

3 に答える 3

3

JavaScriptを介して要素のコンテンツを更新する非常に基本的な例：

<div id="content"></div>

<script>
    document.getElementById('content').innerHTML='<b>oh hai</b>';
</script>​​​​​​​​​​​​​

誰かがリンクをクリックしたときにそれを行うには、更新を実行してからfalseを返す関数をそのリンクのonclickハンドラーにアタッチして、リンクが通常のナビゲーションを実行しないようにします。

すべてのコンテンツを1つのファイルにロードしたくない場合は、AJAXを使用してコンテンツを動的に取得できます。jQueryのようなライブラリ/フレームワークを使用して、AJAXインタラクションのコーディングを簡素化することをお勧めします。

于 2012-07-30T00:35:24.180 に答える
1

これはAJAXで行うことができます。jQueryの例は、次のload関数を使用しています。

http://api.jquery.com/load/

これにより、指定されたURLがフェッチされ、そのコンテンツがセレクターによって一致する要素に読み込まれます。

于 2012-07-30T00:37:38.830 に答える
1

これは、いくつかの異なる方法で解決できます。可能なすべてのコンテンツを一度にロードする必要があります（ロード後にコンテンツにアクセスするのは簡単ですが、初期ロードは遅くなります）。または、ユーザーの要求に応じてコンテンツを非同期的に要求できます。

1）すべてのコンテンツを1ページにハードコーディングする

これを行うことにより、ページに隠されたコンテンツブロックの選択があります。

<div class="content-blocks">
  <div class="content" id="content1">...</div>
  <div class="content" id="content2">...</div>
  ...
</div>

次に、各リンクには、適切なコンテンツをメインコンテンツ要素にロードするためのイベントハンドラーがあります。

document.getElementById('content1-link').onclick = function() {
    document.getElementById('content-box').innerHTML = document.getElementById('content1').innerHTML
}

2）コンテンツのAJAXリクエストを作成します

これを行うには、さまざまなコンテンツブロックを外部ファイル（「content1.html」、「content2.html」など）に保存します。違いを処理するため、このメソッドをAJAXでサポートするjavascriptライブラリを使用することを強くお勧めします。ブラウザが非同期リクエストを処理する方法。jQueryのように、そのようなタスクを実行するための便利な関数を提供するものもあります。

$('#content1-link').on('click',function(){
  $('#content-box').load('/path/to/content1.html');
});

3）includeステートメントを使用する

この方法は、最初のソリューションの実装が簡単です（非同期リクエストに依存しません）が、2番目のソリューションのようにコンテンツを別々のファイルに保持します。基本的に、サーバー/言語がサポートするインクルードのタイプ（SSIインクルード、PHPrequireなど）を利用します。次に、最初のオプションのようにイベントハンドラーを作成します。

于 2012-07-30T00:50:10.827 に答える