多页面公用头部---通过js的.load()方法加载页面头部文件（header.html）

主页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/ecological.css">
</head>
<body>
<!------------- 头部 ----------------->
<div id="header_box"></div>
<!---------  页面主内容  ------------->
<div ></div>

 <script src="./js/jquery.min.js"></script>
<!--引入头部-->
<script src="./js/public.js"></script>
</body>
</html>

头部文件 (图片路径和文件路径为绝对路径)

<header>
    <a href="/" class="img-logo">
        <img src="img/public/logo.png" alt="">
        <span class="logo-word">iuems</span>
    </a>
    <div class="header-right">
        <ul class="nav-items">
            <li class="nav-item">
                <a href="home.html">首页</a>
            </li>
            <li class="nav-item">
                <a href="ecological.html">生态模型</a>
            </li>
            <li class="nav-item">
                <a href="artificial.html">人工智能</a>
            </li>
        </ul>
        <div class="login-bt">
            <img src="img/public/user.png" alt="">
            <span>登录/注册</span>
        </div>
    </div>
</header>

引入头部的public.js文件

//加载头部
$("#header_box").load("./public/header.html", function() {});
版权声明：本文为qq_41459772原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。