页面之间的导航-HTML

Question

I trying to navigate between 3 pages which contain the same header and footer but each page has different content. 我试图在包含相同的页眉和页脚但每个页面具有不同内容的3个页面之间导航。 I want to load different contents html on hash change. 我想在哈希更改上加载不同的内容html。 The problem is that when I click on the same page again, the content.html loaded again. 问题是当我再次单击同一页面时，content.html再次加载。

How can I use the content without loading the html again and again, using java script/html/jquery? 我如何使用内容而不使用Java脚本/ html / jquery一次又一次地加载html？

Code example: 代码示例：

Navigationbar.html 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 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>

Answer 1

A longer but suitable solution would be to build a content cache on your own. 更长久但合适的解决方案是自行构建内容缓存。

For example asking to the server just once the html and then setting it to the $('#content') element. 例如，仅向服务器询问一次html，然后将其设置为$('#content')元素。 You can use this helper function. 您可以使用此辅助功能。

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);
    }
};

And then replace the $('#content').load calls by calls to this new asynchronous way. 然后用对这种新的异步方式的调用替换$('#content').load调用。

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);
   }
}

As suggested in some comments, consider using native HTML navigation instead. 如某些注释中所建议，请考虑改为使用本机HTML导航。 Another suggestion is to use a client-side JS framework which supports routing if this application is likely to grow. 另一个建议是使用客户端JS框架，如果此应用程序可能会增长，则该框架支持路由。

Answer 2

Add an if condition that checks whether the current hash location matches with the one that's been clicked on, and if it does just return. 添加一个if条件，该条件检查当前哈希位置是否与单击的哈希位置匹配，以及是否确实返回。 You'd have to store it in a global JS variable, and set it every time you navigate. 您必须将其存储在全局JS变量中，并在每次导航时进行设置。

页面之间的导航-HTML

问题描述

2 个解决方案

解决方案1
1 已采纳 2017-01-04 12:32:21

解决方案2
0 2017-01-04 12:32:09

页面之间的导航-HTML

问题描述

2 个解决方案

解决方案1 1 已采纳 2017-01-04 12:32:21

解决方案2 0 2017-01-04 12:32:09

解决方案1
1 已采纳 2017-01-04 12:32:21

解决方案2
0 2017-01-04 12:32:09