0

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

没有 php。没有框架。Javascript？反正有使用HTML吗？

4

2 回答 2

0

谦虚会这样做。

如果你不把它放到网上特别容易，只要把jquery和moderate-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

于 2013-09-06T03:28:15.873 回答
0

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

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

代码：

假设我在这个文件中有这个代码：

主页.html

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

我将有另外两个文件用作 html 部分视图：“partialViews/main.html”和“partialViews/about.html”。（将一些 html 放入这些文件中）

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

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

loadPartialView.js

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

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

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

于 2016-01-11T06:47:01.803 回答