当前位置：首页 > article >正文

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

article 2024/10/25 15:33:37

HTML公用模块引用

一、创建公共header文件
二、导入header模块
三、可能会遇到的问题
- 1. "Uncaught ReferenceError: $ is not defined"

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

创建公共 HTML 文件（例如 header.html）
在主 HTML 文件中引入 jQuery
使用 jQuery 加载公共 HTML 文件

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

一、创建公共header文件

将页面中的header模块单独copy一份，创建header.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，不然会报错哈。

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