JQuery创建HTML公用模块进行引用

HTML公用模块引用

开发环境可能会遇到多个Html存在一个模块是相同的,因此在修改过程中逐一修改比较麻烦,因此把这个公用模块另外写就一个html,使用JQuery导入模块。
具体步骤:

  1. 创建公共 HTML 文件(例如 header.html)
  2. 在主 HTML 文件中引入 jQuery
  3. 使用 jQuery 加载公共 HTML 文件

这个场景应该是很少遇到的,毕竟只用前端三件套(js,css,html)不用框架写的还是比较少的。

一、创建公共header文件

将页面中的header模块单独copy一份,创建header.html文件

html 复制代码
<header>
    <h1>网站标题</h1>
    <nav>
        <ul>
            <li><a href="#home">首页</a></li>
            <li><a href="#about">关于我们</a></li>
            <li><a href="#services">服务</a></li>
            <li><a href="#contact">联系我们</a></li>
        </ul>
    </nav>
</header>

此处不需要引入css之类的样式文件,在引用的主页面的head中引用css就好了,方便管理

二、导入header模块

在main.html中导入之前创建的header模块,此处一定要导入jquery,不然会报错哈。

html 复制代码
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的网站</title>

    <!-- 确保 jQuery 在自定义脚本之前加载 -->
    <script defer src="/jquery.min.js"></script> #jquery导入路径
    <script>
        // 使用 jQuery 的 ready 方法,确保 jQuery 已加载
        $(document).ready(function() {
            $("#header").load("/header.html"); #header.html的导入路径
        });
    </script>
</head>
<body>

<div id="header"></div> #id是唯一的因此用id比较保险

<main>
    <h2>欢迎访问我的网站</h2>
    <p>这是一个示例页面。</p>
</main>
</body>
</html>

需要确保jquery和header模块都能够正确加载到浏览器,具体可以按F12查看Source

三、可能会遇到的问题

1. "Uncaught ReferenceError: $ is not defined"

说明jquery没有导入成功,或者没有加载就被引用,需要确保 <script>的导入顺序。

相关推荐
江号软件分享38 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele9 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4539 小时前
React移动端开发项目优化
前端·react.js·前端框架
你的人类朋友9 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维