31

新しいページごとに、ナビゲーションパネルを更新する必要があります。つまり、ページ間を移動して、ナビゲーションバーをコピーして貼り付けます。追加するページが多いほど、難しくなります。現在、一貫性のないナビゲーションバーがあります。したがって、私が探しているのは、CSSやJavaScriptの場合と同じように、ナビゲーションバーのみを含むhtmlファイルを作成し、それをコードに埋め込む方法です。そうすれば、1つのファイルを編集すると、他のすべてのページが更新されます。iframeタグを使用すると、多くの問題が発生する可能性がありますが、必要なことを実行できるタグは他にありません。だから私は何をすべきですか？調査を行いましたが、見つけることができるのはiframeタグだけです。どうすればよいですか。

4

9 に答える 9

16

ページが厳密にHTML+JavaScriptである場合は、HTMLDOMinnerHTMLプロパティを使用できます。次に例を示します。

index.html 

 <body>
  <nav id="navMenu"></nav>
  <div> rest of web page body here </div>
  <script src="script.js"></script>
 </body>

about.html 

 <body>
  <nav id="navMenu"></nav>
  <div> rest of web page body here </div>
  <script src="script.js"></script>
 </body>

script.js

 document.getElementById("navMenu").innerHTML =
 '<ul>'+
  '<li><a href="index.html">Home</a></li>'+
  '<li><a href="services.html">Services</a></li>'+
  '<li><a href="about.html">About</a></li>'+
 '</ul>';

ここで重要な行はnavタグであり、この例のabout.htmlの他のページにこの行を追加するだけです。

また、必要なことを達成するためにPHPなどをお勧めします。

于 2015-03-03T23:43:10.297 に答える
2

ページが厳密にHTMLの場合は、コピーして貼り付けるだけです。PHPを使用している場合は、インクルードまたはリクルートを実行するだけでよいのですが、現在の状況では、ナビゲーション用にクリーンなHTMLコーディングを実行するだけで済みます。コードをインデントすると、すべてのページにコピーしてページを移動するのが簡単になります。

単純なPHPコードを使用できる場合は、次をお読みください：http ://www.w3schools.com/php/php_includes.asp

于 2013-03-16T04:11:08.327 に答える
2

PHPを使用することを強くお勧めします。

<?php include "header.html"; ?>

ただし、それがオプションでない場合は、サーバーサイドインクルードを使用できます。

同じディレクトリにあるファイル：

<!--#include file="header.html"-->

別のディレクトリにファイルする：

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

これを機能させるには、Linux / Apache（Windowsではない）サーバーが必要です。.shtmlまた、ファイル拡張子を使用する必要があります。

または、拡張子を保持したい場合は、Apacheにすべてのファイルが実際に.htmlあると「考えさせる」ことができます。.html.php

Webサイトのルートに.htaccessファイルを作成し、次の行を追加します。

AddType application/x-httpd-php .html .htm

PHPをCGIとして実行している場合（おそらくそうではない）、代わりに次のように記述する必要があります。

AddHandler application/x-httpd-php .html .htm

（この回答から取得）

于 2013-03-16T04:12:09.960 に答える
1

PHPを使用してこれを実現したい場合は、以下のコードのようなことを行うことができます。2つの「テンプレート」ファイルがあり、必要な数の「コンテンツ」ファイルがあります。

  • header.phpヘッダーのコンテンツ（ロゴ、ナビゲーションメニューなど）が含まれます
  • footer.phpフッターのコンテンツ（下部のナビゲーション、著作権、免責事項など）が含まれます
  • content.php表示したい実際のコンテンツが含まれます。「コンテンツ」ページは無限に持つことができます。

これらのファイルには.php拡張子が付いていますが、HTMLコードは完全に正常に機能することに注意してください。だからあなたはすべてのためにこのようなことをすることができますcontent.php：

content.php

<?php include "header.php"; ?>

<div class="content">
Your page content will go here
</div>

<?php include "footer.php"; ?>

header.php

<html>
<body>
<div class="header">
Header content such as nav bar here
</div>

footer.php

<div class="footer">
Footer content such as copyright here
</div>
</body>
</html>

このようにして、との内容を1回だけ変更できheader.php、footer.php変更はファイルを含めたすべてのページに反映されます。

ご不明な点がある場合や、再度説明が必要な場合は、お気軽にコメントを投稿してください。

于 2013-03-16T04:22:06.860 に答える
1

実際、私のようにフロントエンドの作業のみを行っている場合は、jQueryでload（）を使用するだけで十分です。Skittyとfskirschbaumが言ったように。

ただし、いくつかのポイントを追加したいと思い
ます。1. @Skittyのコメントに基づいて、サーバー側でnavbar.htmlをロードすることが重要です。たとえば、github.io Webサイトでホストし、次のようなURLで参照するだけです。

 $(document).ready(function() {
   $('#nav-container').load('https://berlinali.github.io/test%20header%20template/header.html #nav');}

2. cssファイルがある場合は、htmlファイルの<header>部分の<style></style>内に配置します。

参照が必要な場合は、コードをgithubにプッシュします。それが役に立てば幸い！ https://github.com/BerlinaLI/berlinali.github.io/tree/master/test%20header%20template

于 2017-03-14T09:35:27.463 に答える
0

phpやrubyなどのサーバーサイドスクリプト言語を使用できます。または、say menu.jsonファイルを作成し、それからjavascriptでメニューを作成することもできます。

  1. サーバーサイドでは、サーバーをセットアップする必要があります。または、XAMPPを使用して高速セットアップを行うこともできます。

  2. すべてのメニューリンクを使用してheader.htmlを作成します

  3. 行を使用してメニューファイルを含めます<?php include 'header.html'; ?>（使用するすべてのファイルは.php拡張子である必要があります。または、.html拡張子のphp構成ファイルを編集できます）

于 2013-03-16T04:07:27.317 に答える
0

この場合、PHPがおそらく最良の方法ですが、すべてが純粋なHTMLとJavaScriptで既に設定されているように思われるため、jQueryを使用して外部ファイルをDOMにロードすることを検討できます。

jquery.load('header.html')

もちろん、これには独自の懸念事項がありますが、phpインクルードを使用せずに、単純な.jsフレームワークからすべてを効果的に制御でき、iFrameを必要としません。

JavaScriptがオンになっていないブラウザーのフォールバックに対処したい場合もあるので、詳細をすべて知らずにこれを提案するだけです。サーバーに許可しているので、phpがより良いソリューションであると提案します。重い物を持ち上げます。

于 2013-03-16T04:33:29.170 に答える
0

私はそれを自分で理解しました。JavaScriptファイルを使用してdocument.writeを使用し、これを目的の場所に配置できます。

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

これが私のjsファイルです：

document.write("<div id='sidebartop'>");
document.write("<p>Navigation</p>");
document.write("</div>");

行内で二重引用符と一重引用符の両方を使用する場合は、注意してください。<記号と>記号は二重引用符で囲む必要があると思います。これが私の完全なコードです：

     ----/js/sidebar.js----
document.write("<div id='sidebartop'>");
document.write("<p>Navigation</p>");
document.write("</div>");
document.write("<div id='sidebar'>");
if (page==1) { var p=" style='text-decoration: underline;'" } else { var p=" style='text-decoration: normal;'" }
if (page==2) { var pp=" style='text-decoration: underline;'" } else { var pp=" style='text-decoration: normal;'" }
if (page==3) { var ppp=" style='text-decoration: underline;'" } else { var ppp=" style='text-decoration: normal;'" }
if (page==4) { var pppp=" style='text-decoration: underline;'" } else { var pppp=" style='text-decoration: normal;'" }
if (page==5) { var ppppp=" style='text-decoration: underline;'" } else { var ppppp=" style='text-decoration: normal;'" }
document.write("<p><"+'a href="http://brandonc.handcraft.com/"'+p+">Home</a></p>");
document.write("<p><"+'a href="http://brandonc.handcraft.com/about"'+pp+">About The Author</a></p>");
document.write("<p><"+'a href="http://brandonc.handcraft.com/sevenmages"'+ppp+">The Seven Mages</a></p>");
document.write("<p><"+'a href="http://brandonc.handcraft.com/comment"'+pppp+">Leave A Comment</a></p>");
document.write("<p><"+'a href="http://brandonc.handcraft.com/calender"'+ppppp+">Calender</a></p>");
document.write("</div>");

     ----In place where you want code to go----
<script>var page=5</script>
<script type="text/javascript" src="/js/sidebar.js"/>

おそらく最も効率的ではなく、他の回答のようにPHPを使用することを強くお勧めしますが、これは私にとってはうまくいき、すべてのURLの後に.phpを必要としません。

于 2013-03-21T17:21:15.663 に答える
0

jQuery .load（）を使用するだけです。とても使いやすいです。これが例です

navbar.html

<div>This is the navigation bar</div>

index.html

<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
</head>
<body>

<!--HEADER-->
<div id="nav-container"></div>
<!--HEADER-->

<p>This is the homepage.</p>
<script type="text/javascript">
$(document).ready(function() {
$('#nav-container').load('header.html');
});
</script>
</body>
</html>

about.html

<!DOCTYPE html>
<html>
<head>
<title>About Page</title>
</head>
<body>

<!--HEADER-->
<div id="nav-container"></div>
<!--HEADER-->

<p>This is the about page.</p>
<script type="text/javascript">
$(document).ready(function() {
$('#nav-container').load('header.html');
});
</script>
</body>
</html>
于 2016-12-14T13:01:15.323 に答える