Navigation zwischen den Seiten - html

versuche ich zwischen drei Seiten zu navigieren, die die gleichen Kopf- und Fußzeilen enthalten, aber jede Seite hat unterschiedliche Inhalte. Ich möchte verschiedene Inhalte html bei Hash-Änderung laden. Das Problem ist, dass wenn ich wieder auf die gleiche Seite klicke, die content.html erneut geladen wird.Navigation zwischen den Seiten - html

Wie kann ich den Inhalt, ohne die html wieder geladen und wieder, Java-Skript/html/jquery?

Code-Beispiel:

Navigationbar.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Navigation Bar</title> 
    <link rel="stylesheet" type="text/css" href="css/navigationbar.css"> 

</head> 
<body> 
<nav> 
    <img id="navigation-bar-logo" class="logo" src='images/flybryceLogo.png'> 
    <ul class="navigation-bar-ul"> 
     <li class="navigation-bar-li"><a id="navigation-bar-contact-page-tab" href="#contact.html">CONTACT</a></li> 
     <li class="navigation-bar-li"><a id="navigation-bar-about-us-page-tab" href="#aboutus.html">ABOUT US</a></li> 
     <li class="navigation-bar-li"><a id="navigation-bar-home-page-tab" href="#home.html">HOME</a></li> 
    </ul> 
</nav> 
</body> 
</html>

initial.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>One Page Test</title> 
    <link rel="stylesheet" type="text/css" href="css/homepage.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
</head> 
<body> 
<div id="main-container" class="main-container"> 
    <div id="header" class="header"> 
    </div> 
    <div id="content" class="content"></div> 
    <div id="footer" class="bot"></div> 
</div> 

<script> 
    document.onreadystatechange = function(){ 
     if (document.readyState == 'complete') { 
      window.onhashchange=hash_change; 
      window.onload=hash_change; 
      if(window.location.hash==''){ 
       //default hash 
       window.location.replace('#home.html'); 
      } 

      //load the header 
      $("#header").load("fragments/navigationbar.html"); 
      //load the footer 
      $("#footer").load("fragments/footer.html"); 
     } 
    } 

    function hash_change() 
    { 
     //get the new hash 
     var newHashCode = window.location.hash.substring(1); 

     if (newHashCode === "home.html"){ 
      $("#content").load("home.html"); 

     } else if (newHashCode === "aboutus.html") { 
      $("#content").load("aboutus.html"); 

     } else if (newHashCode === "contact.html"){ 
      $("#content").load("contact.html"); 

     } 

    } 
</script> 
</body> 
</html>

Quelle

2017-01-04 Regina Kreimer

Warum verwenden Sie JS-Navigation, wenn Sie einfach mit normalen HTML navigieren können? – Troyer

Überprüfen Sie die JS-Konsole, möglicherweise zeigen Sie einen Fehler. –

Eine längere aber geeignete Lösung wäre, einen Content-Cache auf Ihrem eigenen zu bauen.

Zum Beispiel auf den Server nur gefragt, sobald die HTML und dann auf das $('#content') Element einstellen. Sie können diese Hilfsfunktion verwenden.

var contentsCache = {}; 
var getAndCache = function(url, callback) { 
    var cachedContents = contentsCache[url]; 

    if (!cachedContents) { 
     $.get(url, function(serverContents) { 
      cachedContents = serverContents; 
      contentsCache[url] = cachedContents; 
      callback(cachedContents); 
     }); 
    } else { 
     callback(cachedContents); 
    } 
};

Und dann ersetzen die $('#content').load Anrufe durch Anrufe auf diese neue asynchrone Art und Weise.

function hash_change() 
{ 
    var fillContentCb = function(s) { 
     $('#content').html(s); 
    }; 
    //get the new hash 
    var newHashCode = window.location.hash.substring(1); 

    if (newHashCode === "home.html"){ 
     getAndCache("home.html", fillContentCb); 

    } else if (newHashCode === "aboutus.html") { 
     getAndCache("aboutus.html", fillContentCb); 
    } else if (newHashCode === "contact.html"){ 
     getAndCache("content.html", fillContentCb); 
    } 
}

Wie in einigen Kommentaren empfohlen, verwenden Sie stattdessen native HTML-Navigation. Ein anderer Vorschlag ist die Verwendung eines clientseitigen JS-Frameworks, das das Routing unterstützt, wenn diese Anwendung wahrscheinlich wächst.

Quelle

2017-01-04 12:32:21 jorgonor

Danke! Es funktioniert super! –

ein, wenn die Bedingung hinzufügen, dass die aktuelle Hash-Stelle überprüft, ob mit dem übereinstimmt, der auf geklickt worden ist und wenn es nur zurückkommt. Sie müssten es in einer globalen JS-Variablen speichern und bei jeder Navigation festlegen.

Quelle

2017-01-04 12:32:09 Orangesandlemons

Danke genau was ich mache ... –

Navigation zwischen den Seiten - html

Antwort

Verwandte Themen