您的位置：首页 > Web前端 > JQuery

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

2017-10-28 11:38 337 查看
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  jquery
相关文章推荐
新的分享
章节导航