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

最新推荐文章于 2024-06-03 08:50:12 发布

zj_zjk_sjz

最新推荐文章于 2024-06-03 08:50:12 发布

阅读量483

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/qq_41459772/article/details/128559227

版权

主页面

<!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() {});

zj_zjk_sjz

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
多页面公用头部---通过js的.load()方法加载页面头部文件（header.html）

【代码】多页面公用头部---通过js的.load()方法加载页面头部文件（header.html）
复制链接

扫一扫

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

主页面

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

引入头部的public.js文件

“相关推荐”对你有帮助么？