11

このトピックは常に出てくる
と思いますが、簡潔な答えが得られないようです。

Web ページ (>20) で再利用したい垂直メニュー バーがあります。はMenu BarHTML でコーディングされ、uses: UL, LI, A、<Div>タグ、および CSS を使用します。これが必要です：

  1. 再利用可能
  2. メンテナンス可能
  3. スケーラブル

したがって、ページを追加するたびにすべてのページを変更する必要はありません。

可能であれば、コーディング アプローチは避けたいと考えています。必要に応じて編集する 1 つのマスター ファイルだけで十分です。CSSandを使用している<div>ため、フレームはスケールされないと思います。私たちは何ができる？

4

10 に答える 10

8

サーバーサイドインクルードは、プログラミング言語を使用したくない場合に使用する方法です。

それらはこの形式を取ります：

<!--#include virtual="menu.html" -->

HTMLでそのタグを配置すると、ページに挿入されます。サーバー側の解析が必要なため、Webサーバーでサーバー側インクルードを有効にする必要があります。試してみることができます。機能しない場合は、サーバーホストに連絡して、それらを有効にできるかどうかを確認してください。Apacheの場合は、.htaccessファイルを介してそれらを有効にする方法もあります。

于 2009-08-04T19:13:51.237 に答える
2

サーバー側のスクリプトや Javascript がなくても、オブジェクトや iframe タグを使用できます。

http://www.w3schools.com/tags/tag_object.asp

http://www.w3schools.com/tags/tag_iframe.asp

注意すべき唯一のことは、リンクで target="parent" を示すことです。

それが役に立てば幸い

于 2011-09-28T10:51:31.920 に答える
2

これを行うには、サーバー側のテクノロジーを使用する必要があります。たとえば、次のことができます...

  • それらをphpに含めます

  • それらを.netのマスターページに入れます

  • これをレールの部分ページまたはレイアウトページに配置します

いくつかの読書：

http://us.php.net/manual/en/function.include.php

http://msdn.microsoft.com/en-us/library/wtxbf3hh.aspx

別の解決策は、Javascript を使用してこれらすべてを作成することですが、そのようにしないでください :)

html:

<script type="text/javascript" src="hack.js"></script>
<div id="mymenu">
</div>

ハック.js:

function createMenu(){
  $("#mymenu").html("all the html of your menu");
}
于 2009-08-04T19:11:02.537 に答える
2

w3 スクリプトを使用して..

index.html

<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>

<body>

<div w3-include-html="header.html"></div>
<div w3-include-html="nav.html"></div>

<script>
w3IncludeHTML();
</script>

</body>
</html>

header.html

<h1>Title</h1>

nav.html

<h2>Your nav</h2>

参照: http://www.w3schools.com/howto/howto_html_include.asp

このコードをローカルホストでテストすることを忘れないでください。

于 2016-12-15T19:16:58.340 に答える
1

私はこれを 2 つの方法で行いました。1 つはサーバー サイド (PHP) を使用する方法で、もう 1 つは Javascript インクルードを使用する方法です (インターネット接続やサーバー機能なしで実行できる必要があるデモ用)。

PHP インクルードの場合、ページは .htm や .html ではなく .php で終わる必要があります。これらは、ヘッダー、フッター、ナビゲーションなどを置き換えるのに非常に理想的です。複数のページで繰り返されるもの。

基本的には、通常のコードを作成し、分割したいコード (この例ではナビゲーション) をコピーして貼り付け、(たとえば) inc_navigation.htm という別のファイルに保存します (このページは .htm と呼ぶことができます)。

次に、実際のページで次のコードを使用します。

<?php include('inc_navigation.htm') ?>

その時点でナビゲーションが挿入されます.htm ファイルに変更を加えると、それが含まれているすべてのページに反映されます。

JavaScript を含めるには、ナビゲーションを含めるすべてのドキュメントの上部に次の行を含める必要があります。

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

次に、includes.js というドキュメントを作成します。

このドキュメントの冒頭で、ナビゲーション変数を宣言します。

var navigation  = new Array();  // This is for the navigation.

次に、同じドキュメントの少し下で、実際にナビゲーション コードの概要を説明する必要があります (角括弧内の行番号は重要です。順番に並べて、0 から始めてください。このコードでは改行を使用できないため、コードのすべての行改行する必要があります):

// ==================== Navigation ==================== //
navigation[0]   = '<div id="tab_navigation">';
navigation[1]   = '<ul id="dropline">';
navigation[2]   = '<li><a href="index.htm"><b>Home</b></a></li>';
navigation[3]   = '<li><a href="about_us.htm"><b>About Us</b></a></li>';
navigation[4]   = '</ul>';
navigation[5]   = '</div><!-- Close TAB NAVIGATION -->';

その後、そのコードをページに挿入する JavaScript を実際に挿入します (実際にはコードを挿入するのではなく、実際に .htm ページのコードを変更せずにページ内でアクセスできるようにします。ソースを表示すると、コード自体ではなく、コードへの参照が表示されます)。

function show(i)
 {
  for (x in i)
  {
   document.write(i[x]+'\n')
  }
 }

最後に、たとえば index.htm ページの .htm ドキュメントで、(上記のナビゲーションというブロックに配置した) ナビゲーション コードを次のように置き換えます。

<script type="text/javascript">show(navigation);</script>

SHOW の後の括弧内の名前は、変数の名前です (以前に宣言されています)。

両方の方法が使用されていることを示すサイトがあります。見たい場合は、私にメッセージを送ってください。

于 2009-08-05T16:46:29.313 に答える
1

私は同じことに直面していました。次に、ナビゲーション バーの html を格納するための新しいファイルを作成しました。

すべてのナビゲーション バー コードを含むファイル navbar.html を作成しました。次に、ナビゲーション バーが必要なメインの html ファイルに、jquery を使用してこのファイルを含めます。

$(document).ready(function() {
    $('#navigation').load('navbar.html');
});

次に、ナビゲーション バーが必要な場所に、次の行を追加します。

<div id="navigation"></div>
于 2014-08-25T04:24:10.740 に答える
0

これまでのところ、私が見つけた最良の解決策の1つは、インターネット上で非常によく文書化されているSon of Suckerfish XHTML / CSSソリューションをモデルにしてメニューをモデル化し、サーバー上のロジックと組み合わせて順序なしリストをレンダリングすることです。順序付けされていないリストを使用することで、結果の出力方法についていくつかの異なるオプションがありますが、メニューに基本的な階層がある限り、それを生成できます。次に、実際のページに対して行う必要があるのは、メニュー生成関数への参照を含めることだけです。

于 2009-08-04T19:13:52.140 に答える
0

PHP を使用する場合は、コマンドを使用するだけでよく、includeこの 1 つのコマンド以外のコーディングは必要ありません。また、サーバー側のインクルード
もチェックしてください

于 2009-08-04T19:09:27.563 に答える