Wie kann ich eine Navigationsleiste auf mehreren Seiten wiederverwenden?

Question 1

Ich habe gerade meine Homepage / index.html Seite fertiggestellt. Damit die Navigationsleiste dort bleibt, wo sie sich befindet, bleibt sie erhalten, während Benutzer durch alle meine Seiten klicken. Muss ich den Navigationscode kopieren und oben auf jeder Seite einfügen? Oder gibt es eine andere Möglichkeit, die sauberer aussehen würde?

HMTL nav:

<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>

Question 2

Das hat mir geholfen. Meine Navigationsleiste befindet sich im Body-Tag. Der gesamte Code für die Navigationsleiste befindet sich in der nav.htmlDatei (ohne HTML- oder Body-Tag nur der Code für die Navigationsleiste). Auf der Zielseite steht dies im headTag:

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

Dann wird im Body-Tag ein Container mit einer eindeutigen ID und einem Javascript-Block erstellt, um den nav.htmlwie folgt in den Container zu laden :

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

</div>

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

Question 3

Ich weiß, dass dies eine ziemlich alte Frage ist, aber wenn Sie JavaScript zur Verfügung haben, können Sie jQuery und seine AJAX-Methoden verwenden.

Erstellen Sie zunächst eine Seite mit dem gesamten HTML-Inhalt der Navigationsleiste.

Verwenden Sie als Nächstes die $.getMethode von jQuery , um den Inhalt der Seite abzurufen. Angenommen, Sie haben den gesamten HTML- Code der Navigationsleiste in eine Datei namens aufgerufen navigation.htmlund ein Platzhalter-Tag (Like <div id="nav-placeholder">) in Ihre Datei eingefügt. index.htmlDann würden Sie den folgenden Code verwenden:

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

Question 4

Sie können PHP verwenden, um eine mehrseitige Website zu erstellen.

Erstellen Sie eine header.php, in die Sie Ihren gesamten HTML-Code für Menüs und soziale Medien usw. Einfügen sollten
Fügen Sie header.php mit dem folgenden Code in Ihre index.php ein

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

(Der obige Code gibt den gesamten HTML-Code vorher aus.) Der Inhalt Ihres Site-Körpers.

Ebenso können Sie problemlos Fußzeilen und andere Elemente erstellen. PHP integriert HTML-Code in ihren Erweiterungen. Lernen Sie diese einfache Lösung besser.

Question 5

Eine sehr alte, aber recht einfache Technik ist die Verwendung von "Server-Side Includes" , um HTML-Seiten in eine Seite der obersten Ebene mit der .shtmlErweiterung aufzunehmen. Zum Beispiel wäre dies Ihre index.shtmlDatei:

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

Ja, es ist lahm, aber es funktioniert. Denken Sie daran, die SSI-Unterstützung in Ihrer HTTP-Serverkonfiguration zu aktivieren ( so wird es für Apache gemacht ).

Question 6

Brando ZWZ bietet einige gute Antworten auf diese Situation.

Betreff: Gleiche Navigationsleiste auf mehreren Seiten 21. August 2018, 10:13 Uhr | LINK

Soweit ich weiß, gibt es mehrere Lösungen.

Zum Beispiel:

Der gesamte Code für die Navigationsleiste befindet sich in der Datei nav.html (ohne HTML- oder Body-Tag nur der Code für die Navigationsleiste).

Dann könnten wir es direkt aus der Abfrage laden, ohne viele Codes zu schreiben.

So was:

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

    </div>

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

Lösung 2:

Sie können JavaScript-Code verwenden, um die gesamte Navigationsleiste zu generieren.

So was:

Javascript-Code:

$(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

Question 7

Ich weiß nicht, ob es für dich funktioniert, aber es funktioniert für mich. Versuchen Sie, die Navigationscodes ohne Kopf- oder Textkennzeichnung zu platzieren (nur den Code, an dem die Navigationsleiste begann und endete). Was passieren wird, ist, dass Sie die Codes für die Navigationsleiste separat platzieren. Angenommen, Sie haben die Navigationscodes bereits in der Datei navigation.html und fügen sie einer anderen Seite hinzu. Nehmen wir an, das wäre index.php. Um es in das Body-Tag aufzunehmen, wird die Navigationsleiste darauf geladen.

Answer 1

82

Ich habe gerade meine Homepage / index.html Seite fertiggestellt. Damit die Navigationsleiste dort bleibt, wo sie sich befindet, bleibt sie erhalten, während Benutzer durch alle meine Seiten klicken. Muss ich den Navigationscode kopieren und oben auf jeder Seite einfügen? Oder gibt es eine andere Möglichkeit, die sauberer aussehen würde?

HMTL nav:

<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>

html navbar blackRob4953
quelle

Ja. Beachten Sie, dass Ihr Server / lokales System beim Klicken auf einen Link in Ihrer Navigation die Datei sendet, die durch den Link angezeigt wird, der heruntergeladen und angezeigt werden soll. Wenn sie auf "Info" klicken, about.htmlwird sie vom Browser geladen. Es sollte also die gleiche Navigation enthalten.

Purag

1

Wenn Sie eine serverseitige Sprache haben, können Sie diesen Code in eine Vorlage einfügen und in alle anderen Seiten einfügen. Verwenden Sie eckiges js, um dies zu einer Direktive zu machen

joyBlanks

3

Ich suche das Gleiche. Dies ist eine Schande, dass wir dies 2017 mit einer kundenbasierten Website nicht tun können. Microsoft hat das Konzept einer Masterseite (_layouts in der aktuellen Version) schon immer. Eine clientseitige "Containerseite" scheint nicht lächerlich zu sein.

Ron

Answer 2

Ja. Beachten Sie, dass Ihr Server / lokales System beim Klicken auf einen Link in Ihrer Navigation die Datei sendet, die durch den Link angezeigt wird, der heruntergeladen und angezeigt werden soll. Wenn sie auf "Info" klicken, about.htmlwird sie vom Browser geladen. Es sollte also die gleiche Navigation enthalten.

Purag

Answer 3

1

Wenn Sie eine serverseitige Sprache haben, können Sie diesen Code in eine Vorlage einfügen und in alle anderen Seiten einfügen. Verwenden Sie eckiges js, um dies zu einer Direktive zu machen

joyBlanks

Answer 4

3

Ich suche das Gleiche. Dies ist eine Schande, dass wir dies 2017 mit einer kundenbasierten Website nicht tun können. Microsoft hat das Konzept einer Masterseite (_layouts in der aktuellen Version) schon immer. Eine clientseitige "Containerseite" scheint nicht lächerlich zu sein.

Ron

Answer 5

76

Das hat mir geholfen. Meine Navigationsleiste befindet sich im Body-Tag. Der gesamte Code für die Navigationsleiste befindet sich in der nav.htmlDatei (ohne HTML- oder Body-Tag nur der Code für die Navigationsleiste). Auf der Zielseite steht dies im headTag:

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

Dann wird im Body-Tag ein Container mit einer eindeutigen ID und einem Javascript-Block erstellt, um den nav.htmlwie folgt in den Container zu laden :

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

</div>

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

Ramtin
quelle

Hallo. Ich weiß nichts über JQuery / Javascript, aber ich wollte es nur versuchen. Ich habe versucht, genau das zu tun, was du gesagt hast. Ich habe mein Navigationsmenü auf einer Seite ohne andere Tags und den Rest des Codes in den Kopf / Text meiner Indexseite (einfache Indexseite) eingefügt. Meine Navigationsleiste wird jedoch nicht auf allen Seiten geladen. Irgendeine Idee, was ich falsch machen könnte? Danke !

Lay

@Lay zeigt es überhaupt? Ich muss Ihnen sagen, dass dieser Code während der Entwicklung (Laden der Seite lokal) oft nicht funktioniert. Haben Sie diesen Code auf einem Server abgelegt?

Ramtin

3

Etwas abseits des Themas und verzeihen Sie meine Unwissenheit: Wenn Sie die jQuery-Version wie in Ihrer Antwort <script src="https://code.jquery.com/jquery-1.10.2.js"></script>fest codieren : Was passiert dann mit Ihrer Seite, wenn Version 1.10.3 oder 1.11.0 herauskommt?

Laryx Decidua

1

@ LaryxDecidua Dann funktioniert es weiter. Wenn Sie immer die neueste Version laden, besteht die Gefahr, dass die Seite beschädigt wird. Denken Sie daran, Änderungen zwischen Versionen zu unterbrechen. Daher wird ein Test empfohlen, wenn Sie zu einer anderen Version wechseln.

Markus Pscheidt

1

Ich habe den obigen Code in index.html auf einem lokalen PC verwendet, in Chrome getestet, es gibt mir unten einen Fehler und die nav.html kann nicht geladen werden.

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.

Irgendeine Idee?

KenyKeny

Answer 6

Hallo. Ich weiß nichts über JQuery / Javascript, aber ich wollte es nur versuchen. Ich habe versucht, genau das zu tun, was du gesagt hast. Ich habe mein Navigationsmenü auf einer Seite ohne andere Tags und den Rest des Codes in den Kopf / Text meiner Indexseite (einfache Indexseite) eingefügt. Meine Navigationsleiste wird jedoch nicht auf allen Seiten geladen. Irgendeine Idee, was ich falsch machen könnte? Danke !

Lay

Answer 7

@Lay zeigt es überhaupt? Ich muss Ihnen sagen, dass dieser Code während der Entwicklung (Laden der Seite lokal) oft nicht funktioniert. Haben Sie diesen Code auf einem Server abgelegt?

Ramtin

Answer 8

3

Etwas abseits des Themas und verzeihen Sie meine Unwissenheit: Wenn Sie die jQuery-Version wie in Ihrer Antwort <script src="https://code.jquery.com/jquery-1.10.2.js"></script>fest codieren : Was passiert dann mit Ihrer Seite, wenn Version 1.10.3 oder 1.11.0 herauskommt?

Laryx Decidua

Answer 9

1

@ LaryxDecidua Dann funktioniert es weiter. Wenn Sie immer die neueste Version laden, besteht die Gefahr, dass die Seite beschädigt wird. Denken Sie daran, Änderungen zwischen Versionen zu unterbrechen. Daher wird ein Test empfohlen, wenn Sie zu einer anderen Version wechseln.

Markus Pscheidt

Answer 10

1

Ich habe den obigen Code in index.html auf einem lokalen PC verwendet, in Chrome getestet, es gibt mir unten einen Fehler und die nav.html kann nicht geladen werden.

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.

Irgendeine Idee?

KenyKeny

Answer 11

Ich weiß, dass dies eine ziemlich alte Frage ist, aber wenn Sie JavaScript zur Verfügung haben, können Sie jQuery und seine AJAX-Methoden verwenden.

Erstellen Sie zunächst eine Seite mit dem gesamten HTML-Inhalt der Navigationsleiste.

Verwenden Sie als Nächstes die $.getMethode von jQuery , um den Inhalt der Seite abzurufen. Angenommen, Sie haben den gesamten HTML- Code der Navigationsleiste in eine Datei namens aufgerufen navigation.htmlund ein Platzhalter-Tag (Like <div id="nav-placeholder">) in Ihre Datei eingefügt. index.htmlDann würden Sie den folgenden Code verwenden:

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

Answer 12

4

Sie können PHP verwenden, um eine mehrseitige Website zu erstellen.

Erstellen Sie eine header.php, in die Sie Ihren gesamten HTML-Code für Menüs und soziale Medien usw. Einfügen sollten
Fügen Sie header.php mit dem folgenden Code in Ihre index.php ein

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

(Der obige Code gibt den gesamten HTML-Code vorher aus.) Der Inhalt Ihres Site-Körpers.

Ebenso können Sie problemlos Fußzeilen und andere Elemente erstellen. PHP integriert HTML-Code in ihren Erweiterungen. Lernen Sie diese einfache Lösung besser.

Sachin Kanungo
quelle

1

Wollen Sie damit sagen, dass ich all dies in PHP konvertieren sollte, anstatt mehrere HTML-Seiten für meine Website? Es ist meine erste Seite, und ich kenne HTML, deshalb habe ich sie verwendet, aber wenn es PHP sein sollte, dann sollte es PHP sein ... Also welche sollte es sein?

blackRob4953

Dies ist sehr einfaches PHP, das Sie leicht lernen können. Sie werden keinen Albtraum erleben, wenn Sie Ihre Seite in eine serverseitige Sprache konvertieren. Ich empfehle das. Aber wenn Sie beabsichtigen, nur HTML zu verwenden, ziehen Sie .shtml für kleine Probleme in Betracht, dennoch finde ich es für wachsende Websites klobig.

Sachin Kanungo

OK. Jetzt, da diese Seite HTML ist. Wie konvertiere ich es in PHP? Sind es ein paar Einträge oder muss ich alle meine Tags wiederholen? Und wenn ja, wie ... Also

vermassle

1

Ändern Sie die Erweiterung in .php und Sie sind fertig. Verwenden Sie die folgenden Klammern, um den PHP-Code <?php include 'header.php'; ?>einzugeben. Gehen Sie zu php.net oder w3schools, um grundlegende Informationen zu erhalten.

Sachin Kanungo

Answer 13

1

Wollen Sie damit sagen, dass ich all dies in PHP konvertieren sollte, anstatt mehrere HTML-Seiten für meine Website? Es ist meine erste Seite, und ich kenne HTML, deshalb habe ich sie verwendet, aber wenn es PHP sein sollte, dann sollte es PHP sein ... Also welche sollte es sein?

blackRob4953

Answer 14

Dies ist sehr einfaches PHP, das Sie leicht lernen können. Sie werden keinen Albtraum erleben, wenn Sie Ihre Seite in eine serverseitige Sprache konvertieren. Ich empfehle das. Aber wenn Sie beabsichtigen, nur HTML zu verwenden, ziehen Sie .shtml für kleine Probleme in Betracht, dennoch finde ich es für wachsende Websites klobig.

Sachin Kanungo

Answer 15

OK. Jetzt, da diese Seite HTML ist. Wie konvertiere ich es in PHP? Sind es ein paar Einträge oder muss ich alle meine Tags wiederholen? Und wenn ja, wie ... Also

vermassle

Answer 16

1

Ändern Sie die Erweiterung in .php und Sie sind fertig. Verwenden Sie die folgenden Klammern, um den PHP-Code <?php include 'header.php'; ?>einzugeben. Gehen Sie zu php.net oder w3schools, um grundlegende Informationen zu erhalten.

Sachin Kanungo

Answer 17

Eine sehr alte, aber recht einfache Technik ist die Verwendung von "Server-Side Includes" , um HTML-Seiten in eine Seite der obersten Ebene mit der .shtmlErweiterung aufzunehmen. Zum Beispiel wäre dies Ihre index.shtmlDatei:

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

Ja, es ist lahm, aber es funktioniert. Denken Sie daran, die SSI-Unterstützung in Ihrer HTTP-Serverkonfiguration zu aktivieren ( so wird es für Apache gemacht ).

Answer 18

Brando ZWZ bietet einige gute Antworten auf diese Situation.

Betreff: Gleiche Navigationsleiste auf mehreren Seiten 21. August 2018, 10:13 Uhr | LINK

Soweit ich weiß, gibt es mehrere Lösungen.

Zum Beispiel:

Der gesamte Code für die Navigationsleiste befindet sich in der Datei nav.html (ohne HTML- oder Body-Tag nur der Code für die Navigationsleiste).

Dann könnten wir es direkt aus der Abfrage laden, ohne viele Codes zu schreiben.

So was:

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

    </div>

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

Lösung 2:

Sie können JavaScript-Code verwenden, um die gesamte Navigationsleiste zu generieren.

So was:

Javascript-Code:

$(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

Answer 19

-5

Ich weiß nicht, ob es für dich funktioniert, aber es funktioniert für mich. Versuchen Sie, die Navigationscodes ohne Kopf- oder Textkennzeichnung zu platzieren (nur den Code, an dem die Navigationsleiste begann und endete). Was passieren wird, ist, dass Sie die Codes für die Navigationsleiste separat platzieren. Angenommen, Sie haben die Navigationscodes bereits in der Datei navigation.html und fügen sie einer anderen Seite hinzu. Nehmen wir an, das wäre index.php. Um es in das Body-Tag aufzunehmen, wird die Navigationsleiste darauf geladen.

qw12
quelle

2

Es ist überhaupt nicht klar, was Sie hier vorschlagen. Bitte geben Sie Markup-Beispiele an.

Isherwood

Soooooooo .... Was du antwortest, ist das gleiche wie das, das @Ramtin gepostet hat? Wenn ja, verstehe ich, aber Sie müssen etwas Klarheit hinzufügen oder die Antwort ganz entfernen.

Momoro

Answer 20

2

Es ist überhaupt nicht klar, was Sie hier vorschlagen. Bitte geben Sie Markup-Beispiele an.

Isherwood

Answer 21

Soooooooo .... Was du antwortest, ist das gleiche wie das, das @Ramtin gepostet hat? Wenn ja, verstehe ich, aber Sie müssen etwas Klarheit hinzufügen oder die Antwort ganz entfernen.

Momoro

Wie kann ich eine Navigationsleiste auf mehreren Seiten wiederverwenden?

Antworten: