如何从外部文件加载导航菜单？（没有 Wamp，所有代码都必须是“浏览器端”）

Question

我有一个静态 HTML 网站。我想将导航（顶部）菜单存储在外部文件中，因此当我更改菜单时，我想查看所有页面中的更改。
我真的真的需要能够在本地查看网页（普通 Windows 用户无需安装其他软件：Apache、PHP、Wamp、特定浏览器等）。

有两个类似的 StackOverflow 问题使用 PHP、SSI和 ... 框架部分解决了这个问题。没有一个解决方案对我有好处：

• 框架显然不在讨论范围内（从 SEO POV 来看很糟糕，在 HTML5 中也已过时）。
• PHP 和 SSI 仅在站点上传到服务器后才能工作，因此在本地无法工作。

我看到的解决方案是将所有菜单放在一个外部 JS 文件中。但是，我发现的所有 JS 示例在 HTML 文件中仍然有菜单的一些“部分”。

那么，是否可以在 JS 文件中包含所有菜单，而在我的 HTML 文件中只调用（并且没有实际的菜单项）该文件？我只有基本的 JS 知识。但足以适应我的需要的通用示例。

Answer 1

菜单.html

<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="active1.html">Contact</a></li>
    <li><a href="active2.html">About</a></li>
    <li><a href="active3.html">Portfolio</a></li>
</ul>

索引.html

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<div id="nav"></div>

js文件：

$(function() {

    $("#nav").load("menu.html");

    function activeNav() {
        var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
         $("#nav ul li a").each(function(){
              if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
              $(this).addClass("active");
         });
    }

    setTimeout(function() {
        activeNav();
    }, 100);

});

setTimeout 允许页面加载，然后运行该函数以查看哪个链接处于活动状态，然后您可以在 css 中添加一个类：

#nav ul li a.active {
        color: #ff0000;
        font-weight: bold;
    }