网站多页面导航栏复用：jQuery加载后页面空白求助

我想让网站所有页面都显示导航栏，但尝试多种方法都没效果。用jQuery的load()方法加载导航栏文件后，页面直接显示空白，相关代码如下：

导航栏代码（navbar.html） #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
        
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/0a48c3a8e0.js" crossorigin="anonymous"></script>

</head>
<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>
</html>

加载导航栏的页面代码 #

<!DOCTYPE html>
<html>

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

    <script>
     $(function() {
         $("#nav-placeholder").load("navbar.html")
     });
     </script>


</html>

问题原因及解决方法 #

核心问题 #

1. 主页面未引入jQuery：加载代码里用了$但没先引入jQuery库，导致代码根本无法执行。
2. 导航栏文件包含完整HTML结构：navbar.html里有<html>、<head>标签，用load()加载时会和主页面的HTML结构冲突，导致渲染异常。

修复步骤 #

1. 修改navbar.html，只保留导航栏核心内容

删掉完整的<html>、<head>标签，只保留导航栏的<div>部分，把外部依赖（jQuery、样式表、FontAwesome）移到所有页面的<head>中：

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

2. 修改主页面，完善依赖引入和结构

确保先引入jQuery，再执行加载代码，同时补全页面的<head>和<body>结构，加入必要的外部依赖：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 先引入jQuery，否则$无法使用 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <!-- 导航栏样式依赖 -->
    <link rel="stylesheet" href="style.css">
    <!-- FontAwesome图标依赖 -->
    <script src="https://kit.fontawesome.com/0a48c3a8e0.js" crossorigin="anonymous"></script>
</head>
<body>
    <div id="nav-placeholder"></div>

    <script>
     $(function() {
         $("#nav-placeholder").load("navbar.html", function(response, status, xhr) {
             // 可选：添加错误日志，方便排查加载失败原因
             if (status === "error") {
                 console.log("导航栏加载失败: " + xhr.status + " " + xhr.statusText);
             }
         });
     });
    </script>
</body>
</html>

3. 额外检查事项

• 确认navbar.html和主页面在同一目录下，或者load()里的文件路径正确（比如子目录的话要写./navbar/navbar.html）。
• 本地测试时不要直接用浏览器打开HTML文件（file://协议），会有跨域限制，建议用本地服务器运行，比如Python的python -m http.server或者XAMPP等工具。

内容的提问来源于stack exchange，提问作者user832075