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>的导入顺序。

相关推荐
玲小珑几秒前
Next.js 教程系列(十)getStaticPaths 与动态路由的静态生成
前端·next.js
天天鸭7 分钟前
写个vite插件自动处理系统权限,降低99%重复工作
前端·javascript·vite
蓝婷儿11 分钟前
每天一个前端小知识 Day 23 - PWA 渐进式 Web 应用开发
前端
无奈何杨20 分钟前
CoolGuard风控中新增移动距离和移动速度指标
前端·后端
恋猫de小郭28 分钟前
Google I/O Extended :2025 Flutter 的现状与未来
android·前端·flutter
江城开朗的豌豆32 分钟前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js
程序员爱钓鱼42 分钟前
Go语言泛型-泛型约束与实践
前端·后端·go
前端小巷子43 分钟前
web从输入网址到页面加载完成
前端·面试·浏览器
江城开朗的豌豆44 分钟前
Vue路由动态生成秘籍:让你的链接'活'起来!
前端·javascript·vue.js
晓得迷路了44 分钟前
栗子前端技术周刊第 88 期 - Apache ECharts 6.0 beta、Deno 2.4、Astro 5.11...
前端·javascript·echarts