2

Web サイトを持っていて、その一部を静的にしたいと考えています。何が起こるかというと、ヘッダー、メニュー バー、およびフッターがすべてのページで一貫しています。それらを常にロードしたいのですが、メニューボタンをクリックすると、サイトの本文だけがリロードされます。

これを早期に達成できる単純なコードの塊はありますか? jsまたはajaxの何か？申し訳ありませんが、これらの言語で自分で何かを成し遂げるには十分な経験がありません。私はすでにjQueryライブラリをチェックしようとしましたが、それでもかなり混乱しています.

ありがとうございました。

4

7 に答える 7

1

ヘッダー、メニューバー、フッターの ID を持つ div コンテナーをすべてのページに追加し、これをロードするだけです。

$(document).ready(function(){ 
    $('#header').load('header.html');
    $('#menubar').load('menubar.html');
    $('#footer').load('footer.html');
});

HTMLファイルにhtml、head、またはbodyタグが含まれていないことを確認してください.div内に記述するHTMLコードのみです。PHP の include 関数のようなものです。

編集：

簡単でシンプルな実装のために、上記のコードを .js ファイル (例: include.js) 内に保存し、これをすべての head 内の html ファイルの他のすべてのスクリプトのインクルードのすぐ下に追加します。

<script type="text/javascript" src="include.js"></script>

EDIT2：

別の解決策は、ヘッダー、メニューバー、フッターの代わりにページのコンテンツをロードすることです。ここでは、同じ仕様を使用します (コンテンツ html ファイル内に html、body などのタグはありません)。

コンテンツ div に名前を付ける<div id="content"></div>

たとえば、あなたのナビゲーションバー：

<div id="navbar">
    <a href="content1.html">Content1</a>
    <a href="content2.html">Content2</a>
</div>

JavaScript コード:

$(document).ready(function() {
    //Click on a link that's child of the navbar
    $('#navbar > a').click(function() {
        //Get the html file (e.g. content1.html)
        var file = $(this).attr('href');
        //Load this file into the #content
        $('#content').load(file);
        return false;
    });
});
于 2012-07-13T08:50:54.970 に答える
1

Ajaxやcssも必要ないと思います!! iFrameを使用するだけです!! それらは素晴らしいです。何が起こるかというと、1 つのページだけを静的コンテンツのホルダー (Header-Menu ...) として設計し、そこに 1 つの iFrame をロードするページのプレースホルダーとして配置することです。適切な css コードを使用して iFrame を必要な場所に配置します。メニュー内のすべてのリンクについて、「ターゲット」属性を iFrame の名前と同じに設定するだけで、すべてのリンクがその iFrame に読み込まれ、ページは表示されません。リンクがクリックされるたびにリロードされます...コードが戻ってきます...

于 2012-07-13T09:02:36.800 に答える
0

Server Side Included の使用を検討する必要があります: http://httpd.apache.org/docs/current/howto/ssi.html

理解するのは簡単ではありませんが (Apache の構成を参照しているため)、これは非常に優れたソリューションです。

簡単に言うと、メイン ページに HTML コードの一部を含めます。

 <!--#include virtual="/footer.html" -->

すべての JQuery Framewol を使用したり理解したりする必要はありません。ユーザー エージェントは Javascript を解析する必要はありません (解析できる場合!)。

これは、この種の目的のための PHP / ASP / Java のかなり良い代替品です。

于 2012-07-13T17:18:45.153 に答える
-1

ajax を使用して、各ページの本文を要求できます。しかし、これは 1 つの可能性にすぎません。多くの可能性があります。別のアプローチとして、スクリプト言語 (php、perl) サーバーサイドを使用してページ コンテンツを作成し、そこで各ページにフッター、ヘッダーなどを追加する関数を使用することもできます。

于 2012-07-13T08:31:57.767 に答える
-1

トラディショナルはiframeいかがですか？

あなたのメニューで：

<a target="body" href="URL_to_your_Menu1_page">Menu1</a>

そしてさらにドキュメントで：

<iframe name="body" src="URL_to_homepage"></iframe>
于 2012-07-13T08:56:24.760 に答える
-1

Jquery のアイデアがある場合は、メニュー リンクでクリック イベントを使用して、次の構文のようにページを div にロードします。

$(document).ready(function(){
   $("a.menu").click(function(){
      $("#bodyContent").load("http://abc.com/your-linked-page.html");
   });
});

URL を動的に読み込むには、次のコードを使用します: メニュー バーのリンクは次のようになります。

<a href="javascript:void(0);" title="Specify-Complete-URL">Home</a>

Jquery コードで:

$(document).ready(function(){
   $("a.menu").click(function(){
      url = $(this).attr("title"); // here url is just a variable
      $("#bodyContent").load(url);
   });
});

ステップ 1: Jquery ファイルを HTML ページに追加します。

ステップ 2: 上記の jquery コードを使用して、メニュー リンクをここで述べた新しいものに変更します。

ステップ 3: 正しく実行すれば、問題なく動作します。

于 2012-07-13T08:35:42.923 に答える
-2

フレームセットとフレームを使用して、それに応じてページを整理できます。そのため、メニューを含むフレームは常に表示でき、メニューをクリックしてコンテンツを表示している間、コンテンツをロードしたいフレームにターゲットを設定できます。

于 2012-07-13T08:32:28.627 に答える