如何在多页面复用带下拉菜单的固定顶部导航栏（无需重复复制粘贴）

阿华AIGC实验室

2026-4-23

我完全懂你现在的困扰——想在多个页面复用带下拉菜单的固定导航栏，试了论坛里的方法结果导航栏直接消失了，尤其是你的导航栏还有下拉和固定顶部的特性，确实容易踩坑。别担心，咱们从基础的JS/HTML/CSS入手，一步步解决这个问题，不用复杂框架。

先排查你之前的核心问题

你之前把完整的<html>和<head>标签都放进了navbar.html里，这会导致嵌入到其他页面时DOM结构混乱，浏览器根本没法正确解析，所以导航栏才会消失。咱们先把navbar.html的内容简化，只保留导航栏的核心部分。

第一步：修正`navbar.html`的内容

把navbar.html里多余的<html>、<head>标签删掉，只保留导航栏的<div>结构，修改后如下：

<div class="navbar">
  <a class="active" href="home.html"> Home </a>
  <a href="about.html">About</a>
  <a href="start">Start</a>
  <a href="blog">Blog</a>
  <div class="dropdown">
    <button class="dropbutton"> Interests</button>
    <div class="dropdown-content">
      <a href="finance">Finance</a>
      <a href="music">Music</a>
      <a href="language">Language</a>
      <a href="math">Math</a>
    </div>
  </div>
  <div class="search-container">
    <input type="text" placeholder="Search...">
    <button type="submit"><i class="fa-sharp fa-solid fa-magnifying-glass"></i></button>
  </div>
</div>

第二步：用原生JS实现导航栏复用（不用jQuery，更靠谱）

既然你想尽量用基础技术，咱们用原生JS的fetch方法来加载导航栏，还顺便帮你自动处理每个页面的导航激活状态（不用手动改每个页面的active类）。在每个需要导航栏的页面（比如home.html）里添加这段代码：

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

<script>
  // 加载导航栏
  fetch('navbar.html')
    .then(response => response.text())
    .then(data => {
      // 把导航栏插入到页面中
      document.getElementById('nav-placeholder').innerHTML = data;
      
      // 自动设置当前页面的导航链接为激活状态
      const currentPage = window.location.pathname.split("/").pop();
      const navLinks = document.querySelectorAll('.navbar a');
      navLinks.forEach(link => {
        // 处理首页的特殊情况（本地服务器可能显示为空字符串）
        if (link.getAttribute('href') === currentPage || 
            (currentPage === '' && link.getAttribute('href') === 'home.html')) {
          link.classList.add('active');
        } else {
          link.classList.remove('active');
        }
      });
    })
    .catch(error => console.error('加载导航栏失败:', error));
</script>

第三步：确保CSS样式正常加载

所有页面都要引入同一个style.css，你原来的导航栏CSS是没问题的，继续保留就行：

.navbar {
  background-color: black;
  width: 100%;
  position: fixed;
  top: 0px
}

.navbar a{
  float: left;
  color: aliceblue;
  text-align: center;
  padding: 10px 10px;
  font-size: 25px;
  text-decoration: none;
}

.navbar a:hover {
  background-color: lightseagreen;
  color: black;
}

.navbar a.active {
  background-color: lightseagreen;
  color: aliceblue;
}

.dropdown{
  float: left;
  overflow: hidden;
}

.dropdown .dropbutton {
  font-size: 25px;
  border: none;
  outline: none;
  color: aliceblue;
  padding: 10px 10px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbutton {
  background-color: lightseagreen;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: black;
  min-width: 160px;
}

.dropdown-content a {
  float: none;
  color: aliceblue;
  text-align: center;
  padding: 10px 10px;
  font-size: 25px;
  text-decoration: none;
  display: block;
}

.dropdown:hover .dropdown-content{
  display: block;
}

.navbar input[type=text]{
  float: none;
  padding: 5px 10px;
  border: none;
  margin-top: 10px;
}

.navbar .search-container {
  float: right;
}

.navbar .search-container button {
  float: right;
  padding: 5px 10px;
  margin-top: 10px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

几个关键注意事项

路径问题：确保navbar.html和其他页面在同一目录下，如果不在，fetch的路径要写对，比如./components/navbar.html。
本地测试要用服务器：直接打开本地HTML文件（file://协议）会有跨域限制，fetch没法加载navbar.html，建议用VSCode的Live Server插件或者其他本地服务器来测试。
激活状态自动适配：上面的JS代码已经帮你处理了每个页面的导航高亮，不用再手动修改每个页面的active类。

修正后的`home.html`完整示例

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css">
  <script src="https://kit.fontawesome.com/0a48c3a8e0.js" crossorigin="anonymous"></script>
</head>
<body>
  <div id="nav-placeholder"></div>

  <script>
    fetch('navbar.html')
      .then(response => response.text())
      .then(data => {
        document.getElementById('nav-placeholder').innerHTML = data;
        const currentPage = window.location.pathname.split("/").pop();
        const navLinks = document.querySelectorAll('.navbar a');
        navLinks.forEach(link => {
          if (link.getAttribute('href') === currentPage || 
              (currentPage === '' && link.getAttribute('href') === 'home.html')) {
            link.classList.add('active');
          } else {
            link.classList.remove('active');
          }
        });
      })
      .catch(error => console.error('加载导航栏失败:', error));
  </script>

  <div class="header">
    <h1>Welcome to my website</h1>
    <p>heloelkfjashdlkjf</p>
  </div>

  <div class="row">
    <div class="left">test testafdkjhaskfjhalkjfhlakjhflkajh
      asldfkjhalskjfh
      adslfkjhaslkdjfh
      al;ksjfdhalkjh
    </div>
    <div class="main">
      <div class="cards-row">
        <div class="column">
          <div class="card"> <a href="asdf"> asdf</a></div>
        </div>
        <div class="column">
          <div class="card"> <a href="1"> 1 </a> </div>
        </div>
        <div class="column">
          <div class="card"> <a href="2"> 2 </a> </div>
        </div>
        <div class="column">
          <div class="card"><a href="3"> 3</a> </div>
        </div>
      </div>
      <h1>Hello World</h1>
    </div>
  </div>
</body>
</html>

这样修改后，导航栏应该能正常显示，下拉菜单和固定顶部的特性也能完美保留，而且所有页面都能复用同一个navbar.html，不用再重复复制代码啦！

备注：内容来源于stack exchange，提问作者user832075