Question

我正在我的第一个网站上工作，我不打算把它放在互联网上。但是，我想在其他页面上重用导航和页脚。

没有PHP。没有帧。 JavaScript的？有没有使用HTML？

Answer 1

Modest会这样做。

如果您不将它放在互联网上，只需将jquery和modest-preview.js放入该部分就可以了，您可以立即开始使用它：

<强> main.xhtml

<?xml version='1.0' encoding='UTF-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="modest-preview.js"></script>
    <include>myNav</include>
  </head>
  <body>
    <myNav/>
  </body>
</html>

<强> myNav.xml HTML | CSS | JavaScript | jQuery

Answer 2

我知道有点老了，但我找到了实现这个目标的方法。

您可以使用ajax将部分代码加载到HTML中，并保留页面的其余部分而不进行更改，以便使用相同的导航。

代码：

假设我在此文件中包含此代码：

home.html的

＆＃13;

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="thirdParty/bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/site.css" rel="stylesheet" />
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-header">
            <a class="navbar-brand" href="#/">NAVBAR</a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class=" active">
                    <a href="#/">Home</a>
                </li>
                <li>
                    <a href="#/about">About</a>
                </li>
                <li>
                    <a href="#about">Rebout</a>
                </li>
            </ul>
        </div>
    </nav>
    <main id="main">
    </main>
    <script src="thirdParty/jquery-1.12.0.min.js"></script>
    <script src="thirdParty/jquery.ba-hashchange.min.js"></script>
    <script src="js/partialViewLoad.js"></script>
    <script src="thirdParty/bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
</body>
</html>

＆＃13;

我还有两个文件可用作htmls部分视图：＆＃39; partialViews / main.html＆＃39;和部分视图/ about.html＆＃39;。（将一些html放入这些文件中）

我使用插件jquery.ba-hashchange.min来刷新html。

至少我有用于加载部分视图的脚本：

loadPartialView.js

＆＃13;

$(function () {
    $(window).hashchange(function () {
        if (location.hash.indexOf('#/') > -1) {
            loadPartial(location.hash.substr(location.hash.lastIndexOf('/') + 1));
        }
    });
    $(window).hashchange();
});

function loadPartial(partialName) {
    partialName = partialName || 'main';
    $.get('/partialViews/' + partialName + '.html').done(function (html) {
        $('#main').html(html);
    });
}

$(document).ready(function() { loadPartial(); });

＆＃13;

当你点击ul中的链接时，哈希位置会改变，这将触发我们创建的jquery回调。在那一刻，我们加载了部分视图。

我建议您使用服务器和更强大的语言来完成此任务。但是这个解决方案可以工作，易于实现，甚至可以在服务器上运行。

无需服务器即可重用导航

2 个答案: