ready
论坛版主
论坛版主
  • UID24
  • 粉丝0
  • 关注0
  • 发帖数433
  • 社区居民
  • 忠实会员
  • 原创写手
阅读:4765回复:0

利用jQuery实现加载公共头部和底部

楼主#
更多 发布于:2019-10-18 13:31

<!doctype html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>把头部和尾部通过jquery加载进页面</title>
        <link rel="shortcut icon" href="../favicon.ico" />        
        <style>
            body{text-align: center;}
        </style>
    </head>

    <body>
        <!--放一个id为header的div,把header.html加载到这块-->
        <div id="header"></div>         <div class="main" style="width:100%;padding:100px 0;background:#dcdcdc;">
            <h1>我是主体</h1>
        </div>

        <!--放一个id为footer的div,把footer.html加载到这块-->
        <div id="footer"></div>         <!--利用jquery的load()方法把header.html和footer.html加载进来     -->
        <script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
        <script>
            $(function() {
                $('#header').load('common/header.html');
                $('#footer').load('common/footer.html');
            })
        </script>
    </body>

</html>
游客


返回顶部