複数のページでナビゲーションバーを再利用するにはどうすればよいですか?


84

home /index.htmlページの作成が完了しました。ナビゲーションバーを現在の場所に維持し、ユーザーがすべてのページをクリックしている間、ナビゲーションバーを維持するため。ナビゲーションコードをコピーして各ページの上部に貼り付ける必要がありますか?それとも、きれいに見えるようにする別の方法はありますか?

HMTLナビゲーション:

<nav>
    <div>
        <a href="/">
            <div id="logo"><img src="image.png" alt="Home"/></div>
            <div id="headtag"><img src="image.png" alt="Home"/></div>
            <div id="tagline"><img src="image.png" alt="Home"/></div>
        </a>
    </div>
    <div> 
        <a href="/" class="here">Home</a>
        <a href="/about.html" >About</a>      
        <a href="/services.html" >Services</a>          
        <a href="/pricing.html" >Pricing</a>    
        <a href="/contact.html" >Contact Us</a>
        <input id="srchbar" type="search" placeholder="Search">
    </div>
</nav>

はい。ユーザーがナビゲーション内のリンクをクリックすると、サーバー/ローカルシステムは、ダウンロードして表示するリンクで示されるファイルを送信することに注意してください。「バージョン情報」をクリックabout.htmlすると、ブラウザに読み込まれます。したがって、同じナビゲーションが含まれている必要があります。
プラッグ2015

1
サーバーサイド言語を使用している場合は、このコードをテンプレートに入れてすべてのページに含めることができます。それ以外の場合は、Angular jsを使用してこれをディレクティブにします
joyBlanks 2015

3
私は同じものを探しています。これは、2017年にクライアントベースのWebサイトでこれを行うことができないのは残念です。Microsoftには、マスターページ(現在のバージョンでは_layouts)の概念が永遠にあります。クライアント側の「コンテナページ」はばかげていないようです。
ロン

回答:


79

これが私を助けたものです。私のナビゲーションバーはbodyタグにあります。ナビゲーションバーのコード全体がnav.htmlファイルに含まれています(htmlまたはbodyタグはなく、ナビゲーションバーのコードのみ)。ターゲットページでは、これはheadタグに含まれます。

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

次に、bodyタグで、nav.html次のように、をコンテナにロードするための一意のIDとjavascriptブロックを使用してコンテナが作成されます。

<!--Navigation bar-->
<div id="nav-placeholder">

</div>

<script>
$(function(){
  $("#nav-placeholder").load("nav.html");
});
</script>
<!--end of Navigation bar-->

こんにちは。jquery / javascriptについては何も知りませんが、これを試してみたかっただけです。私はあなたが言ったことを正確にやってみました。1つのページに他のタグなしでナビゲーションメニューがあり、残りのコードをインデックスページ(単純なインデックスページ)のヘッド/ボディに含めました。ただし、すべてのページにナビゲーションバーが読み込まれるわけではありません。私が間違っているかもしれない何か考えはありますか?ありがとうございました !
2018年

@Layはまったく表示されますか?開発中(ページをローカルにロード中)、このコードは機能しないことがよくあります。このコードをサーバーに配置しましたか?
ラムティン2018年

3
少しトピックから外れて、私の無知を許してください:あなたが答えでしたようにjQueryバージョンをハードコーディングした場合:<script src="https://code.jquery.com/jquery-1.10.2.js"></script>、バージョン1.10.3または1.11.0が出たときにあなたのページはどうなりますか?
Laryx Decidua 2018

1
@LaryxDeciduaそれからそれは働き続けます。常に最新バージョンをロードすると、ページが破損するリスクがあります。バージョン間の変更を壊すことを考えてください。したがって、別のバージョンに切り替える場合はテストをお勧めします。
Markus Pscheidt 2018年

2
ローカルPCのindex.htmlで上記のコードを使用し、Chromeでテストしました。以下のエラーが発生し、nav.htmlを読み込めません。jquery.min.js:4 Access to XMLHttpRequest at 'nav.html' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.何か案が?
ケニーケニー

36

これはかなり古い質問ですが、JavaScriptを利用できる場合は、jQueryとそのAJAXメソッドを使用できます。

まず、ナビゲーションバーのすべてのHTMLコンテンツを含むページを作成します。

次に、jQueryの$.getメソッドを使用してページのコンテンツをフェッチします。たとえば、ナビゲーションバーのすべてのHTMLをというファイルに入れnavigation.htmlてプレースホルダータグ(Like <div id="nav-placeholder">)をに追加したindex.htmlとすると、次のコードを使用します。

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$.get("navigation.html", function(data){
    $("#nav-placeholder").replaceWith(data);
});
</script>

4

あなたは複数ページのウェブサイトを作るためにphpを使うことができます。

  • メニューやソーシャルメディアなどのすべてのHTMLコードを配置するheader.phpを作成します
  • 次のコードを使用して、index.phpにheader.phpを挿入します

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

(上記のコードは、この前にすべてのhtmlコードをダンプします)サイト本体のコンテンツ。

  • 同様に、フッターやその他の要素を簡単に作成できます。PHP組み込みは、拡張機能でhtmlコードをサポートします。だから、この簡単な修正をもっとよく学んでください。

1
それで、あなたは私が私のサイトのために複数のHTMLページの代わりにこれをすべてPHPに変換するべきだと言っていますか?これは私の最初のサイトであり、htmlを知っているので、それを使用しましたが、PHPである必要がある場合は、PHPである必要があります。
blackRob4953 2015

これはあなたが簡単に学ぶことができる非常に基本的なphpです。サーバーサイド言語を使用するようにサイドを変換するときに、悪夢に直面することは一度もありません。私はこれをお勧めします。しかし、htmlのみを使用する場合は、小さな問題には.shtmlを検討してください。それでも、成長するWebサイトには不格好です。
Sachin Kanungo 2015

OK。これで、このページはhtmlになりました。どうすればphpに変換できますか?いくつかのエントリですか、それともすべてのタグをやり直す必要がありますか?もしそうなら、どのように....だから私はそれを
台無し

1
拡張子を.phpに変更すれば完了です。次のコード中括弧を使用してphpコードを入力します<?php include 'header.php'; ?>。基本的な学習については、php.netまたはw3schoolsにアクセスしてください。
Sachin Kanungo 2015

3

非常に古いが十分に単純な手法は、「サーバーサイドインクルードを使用して、.shtml拡張子が付いたトップレベルページにHTMLページを含めることです。たとえば、これはあなたのindex.shtmlファイルになります:

<html>
<head>...</head>
<body>
<!-- repeated header: note that the #include is in a HTML comment -->
<!--#include file="header.html" -->
<!-- unique content here... -->
</body>
</html>

はい、それはラメですが、それは機能します。HTTPサーバー構成でSSIサポートを有効にすることを忘れないでください(これはApacheで行う方法です)。


3

Brando ZWZは、この状況に対処するためのいくつかの優れた回答を提供します。

Re:複数のページに同じナビゲーションバー2018年8月21日10:13 AM | LINK

私の知る限り、複数の解決策があります。

例えば:

ナビゲーションバーのコード全体はnav.htmlファイルにあります(htmlまたはbodyタグはなく、ナビゲーションバーのコードのみ)。

次に、多くのコードを記述せずに、jqueryから直接ロードできます。

このような:

    <!--Navigation bar-->
    <div id="nav-placeholder">

    </div>

    <script>
    $(function(){
      $("#nav-placeholder").load("nav.html");
    });
    </script>
    <!--end of Navigation bar-->

解決策2:

JavaScriptコードを使用して、ナビゲーションバー全体を生成できます。

このような:

Javascriptコード:

$(function () {
    var bar = '';
    bar += '<nav class="navbar navbar-default" role="navigation">';
    bar += '<div class="container-fluid">';
    bar += '<div>';
    bar += '<ul class="nav navbar-nav">';
    bar += '<li id="home"><a href="home.html">Home</a></li>';
    bar += '<li id="index"><a href="index.html">Index</a></li>';
    bar += '<li id="about"><a href="about.html">About</a></li>';
    bar += '</ul>';
    bar += '</div>';
    bar += '</div>';
    bar += '</nav>';

    $("#main-bar").html(bar);

    var id = getValueByName("id");
    $("#" + id).addClass("active");
});

function getValueByName(name) {
    var url = document.getElementById('nav-bar').getAttribute('src');
    var param = new Array();
    if (url.indexOf("?") != -1) {
        var source = url.split("?")[1];
        items = source.split("&");
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            var parameters = item.split("=");
            if (parameters[0] == "id") {
                return parameters[1];
            }
        }
    }
}

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <div id="main-bar"></div>
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <%--add this line to generate the nav bar--%>
    <script src="../assets/js/nav-bar.js?id=index" id="nav-bar"></script>
</body>
</html>

https://forums.asp.net/t/2145711.aspx?Same+navbar+on+multiple+pages

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.