如何抽取公用的HTML内容

  • 事先准备好文件jquery-1.11.2.min.js
  • 要做的是从aaa.html中引用header.html的内容
  • 结构
    在这里插入图片描述
  • 注意在header.html中,也就是抽取出来的页面中只能写抽取的内容.
    1
    <p class="ppp">我是头部1</p>
  • aaa.html
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /*使用css依然生效*/
    .ppp {
    color: blue;
    }
    </style>
    </head>
    <body>
    <div id="header"></div>
    <p>我是aaa</p>

    <script type="text/javascript" src="lib/jquery-1.11.2.min.js"></script>
    <!--引用js-->
    <script type="text/javascript" src="css/header.js"></script>
    </body>
    </html>
  • header.js
    1
    2
    3
    4
    $(document).ready(function () {
    // header.html的内容是加载在`#header`的div标签中的
    $("#header").load("./header.html");
    });
  • 打开效果
    在这里插入图片描述