美文网首页HTML
HTML页面引入公共的头部、底部、模块

HTML页面引入公共的头部、底部、模块

作者: 东方晓 | 来源:发表于2019-03-18 10:37 被阅读0次

网页公共的部分很多,如果每个页面都要写或者修改,太麻烦,百度后,有两种方案,一是iframe,是之前比较常用的,但总觉得iframe不太好用,最后找到另一种,jq的load方法。

1、先写好公共部分的文件,可以把样式写在<head>中间的<style>标签里面,如果需要操作DOM,也要在该页面写好。

不要在模版页引入公用的CSS或者JavaScript文件,这样会出现重复的样式和事件。

2、在需要引入公共文件的页面:

  • 引入JQuery库
  • 引入公共模板
<!-- header -->
<div class="header"></div>
<!-- header over-->

<div class="main"></div>

  <!--footer-->
    <div class="footer"></div>
 <!--footer over-->

<script>
        // 导入公共模板
        $(function(){
            $(".header").load("header.html");
            $(".footer").load("footer.html");
        });
    </script>

相关文章

网友评论

    本文标题:HTML页面引入公共的头部、底部、模块

    本文链接:https://www.haomeiwen.com/subject/mttvmqtx.html