原生js和html5实现多个 HTML 文件可以共用一个头部导航栏

使用JavaScript动态加载：在每个 HTML 文件中，通过 script 标签引入一个 JavaScript 文件，利用 JavaScript 的载入事件来动态加载头部导航栏的内容

具体方法如下

• 在每个 HTML 文件中，将以下代码添加到 标签中：(/path/to/header.js是实际的文件路径)

<script src="/path/to/header.js"></script>复制

• 在 header.js 文件中，编写 JavaScript 代码来动态加载头部导航栏的内容并添加点击事件和选中样式。
  • 首先通过 getElementById 方法获取到头部导航栏容器的元素，然后创建一个新的 div 元素作为头部导航栏的内容，并在其中为每个导航栏项添加了不同的 id。接着使用 appendChild 方法将头部导航栏元素插入到容器中。
  • 我们获取了所有导航栏项元素，所有的 a 元素作为导航栏项，并使用 getAttribute 方法获取导航栏项的链接地址。当点击导航栏项时，我们取消默认行为，移除当前的选中样式，为点击的导航栏项添加选中样式，并使用 window.location.href 将页面重定向到相应的链接地址。
  • 你需要使用 CSS 样式表来定义 .selected 类的样式，以便为选中的导航栏项添加特殊的样式。
  • 我们通过 window.location.href 获取当前页面的 URL 地址，并使用 indexOf 方法匹配导航栏项的链接地址。若匹配成功，则将对应的导航栏项设置为默认选中项。

document.addEventListener('DOMContentLoaded', function() {
    // 定位到头部导航栏容器
    var navbarContainer = document.getElementById('navbar-container');
 
    // 创建头部导航栏元素
    var navbarElement = document.createElement('div');
    navbarElement.innerHTML = '<ul><a href="/home"><li id="home">首页</li></a>< <a href="/about"><li id="about">关于我们</li></a><a href="/contact"><li id="contact">联系我们</li></a></ul>';
 
    // 将头部导航栏元素插入到容器中
    navbarContainer.appendChild(navbarElement);
 
    // 获取所有导航栏项
    var navItems = document.querySelectorAll('#navbar-container a');
 
    // 为每个导航栏项注册点击事件处理程序
    for (var i = 0; i < navItems.length; i++) {
        navItems[i].addEventListener('click', function(event) {
            // 取消默认行为
            event.preventDefault();
 
            // 移除当前选中样式
            var selectedNavItem = navbarContainer.querySelector('.selected');
            if (selectedNavItem) {
                selectedNavItem.classList.remove('selected');
            }
 
            // 添加当前导航栏项的选中样式
            this.classList.add('selected');
            // 获取导航栏项的链接地址并重定向页面
            var href = this.getAttribute('href');
            window.location.href = href;
        });
    }
    let defaultSelectedNavItem = navItems[0]
    // 默认选中的导航栏项
    for (var i = 0; i < navItems.length; i++) {
        var href = navItems[i].getAttribute('href');
        if (window.location.href.indexOf(href) !== -1) {
            defaultSelectedNavItem = navItems[i];
            break;
        }
    }
    defaultSelectedNavItem.classList.add('selected');
});
 复制

• 如果要阻止重复点击导航栏项，可以在上述代码中的event.preventDefault();下添加一个判断条件

   if (this.classList.contains('selected')) {
        return;
   }复制