javascript - 如何从外部文件加载导航菜单？ (没有 Wamp，所有代码必须是 'browser-side' )

Question

我有一个静态 HTML 网站。我想将导航(顶部)菜单存储在外部文件中，这样当我更改菜单时，我想在所有页面中看到更改。
我真的真的需要也能在本地查看网页(普通 Windows 用户无需安装额外的软件:Apache、PHP、Wamp、特定浏览器等)。

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

• 框架显然不在讨论范围内(从 SEO POV 和 HTML5 中的 obsolete 来看很糟糕)。
• PHP 和 SSI 只有在网站上传到服务器后才能工作，因此不能在本地工作。

我看到的解决方案是将所有菜单放在外部 JS 文件中。然而，我发现的所有 JS 示例 still have some 'parts' of the menu在 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>

index.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;
    }