私はすべてのページのヘッダーとフッターが同じであるWebアプリケーションを開発しています。私が達成したいのは、ヘッダーのボタンがクリックされたときに、ヘッダーとフッターの間のページの部分だけを変更することです。たとえば、ホーム、アクティビティ、エリアの3つのボタンがあります。アクティビティをクリックすると、ページのヘッダーとフッターが同じままになり、ヘッダーとフッターの間にアクティビティページが表示されます。どうやってやるの？ウェブページの内部のみを変更するにはどうしたらいいですか？
私はレモンに同意します。私はjQuery/AJAXがあなたが探しているものだと思います。たとえば、
<html>
<head>
<!-- Include Jquery here in a script tag -->
<script type="text/javascript">
$(document).ready(function(){
$("#activities").click(function(){
$("#body").load("activities.html");
});
});
</script>
</head>
<body>
<div id="header">
<a href="#" id="activities">Activities</a>
<!-- this stays the same -->
</div>
<div id="body">
<!-- All content will be loaded here dynamically -->
</div>
<div id="footer">
<!-- this stays the same -->
</div>
</body>
</html>
この単純な実装では、2つの単純なHTMLページを作成しましたが、index.htmlがテンプレートとして使用されます。そして、動的にロードしたいコンテンツを含むactivities.html。
したがって、アクティビティをクリックすると、ページ全体を再読み込みせずにactivities.htmlが読み込まれます。
あなたは、私はこれをテストしていませんが、それは動作するはずjquery.org
からjQueryライブラリをダウンロードすることができます。
ご希望の方：
ページが配信されるとき - ヘッダー+ボディ+フッターがマージされます。これを1ページとして扱うことができます。したがって、あなたのヘッダーの中で、あなたのボディの中の要素が "コンテナ"と呼ばれ、それをあなたがボディセクションに含めると、それを変更できるようになります。
PHPまたはサーバーサイドページを使用していますか？あなたは、ヘッダーとフッターを含むことができます。 Jqueryはあなたのページに頭やフッタを含めるだけのためには本当に複雑です。
あなたが AJAX（非同期JavaScriptとXMLの頭文字）を探しているPHP、JSP、またはASPを使用していますか？ –
私はJSPを使用しています... – Piscean
次に、コードに次の行を挿入して、ヘッダーをフッターに含めます。 ファイル名は、header.jspまたはfooter.jspのようなファイルの場所になります –
サーバーにAJAXリクエストを行う必要があります。サーバーはヘッダーとフッターの間にHTMLを挿入して応答します。そして、AJAXコールバックヘンドラーは現在のコンテンツを新しいものに置き換えます。
これはすべて、jQueryのショートカットloadの機能によって実行されます。 http://api.jquery.com/load/
コンテンツを含むdivを作成し、固有のクラスまたはIDを付けます。 次に、jqueryコードでナビゲーションとして使用する要素のclickイベントをバインドし、そのバインドで$（ "＃div"）load（ "page.php"）などを使用して別のファイルからコンテンツをロードしますdivに
は、すべてのページの高さが異なることを1つだけ尋ねます。 div bodyの高さと幅を調整する方法高さ：100％、幅：100％、大丈夫ですか？ – Piscean
は必要ありません。高さは通常コンテンツに自動的に調整されます – Flo
HTMLでは、hrefのIDは「#activities」ですが、「activities」にする必要があります。 – showdev