前端静态html页面，封装公共的头文件（header：顶部页眉，顶部导航栏等部分）和尾部文件（footer：CopyRight、友情链接等部分）

当前方法：通过load()函数，引入公共头部和尾部文件;

本文案例：引入通用的侧边栏

案例结构图：

侧边栏对应的html文件代码：

<aside class="main-sidebar">

    <!-- sidebar: style can be found in sidebar.less -->

    <section class="sidebar">

        <!-- sidebar menu: : style can be found in sidebar.less -->

        <ul class="sidebar-menu">

            <li class="header">功能列表</li>

            <!-- 菜单 -->

            <li class="treeview">

                <a href="#">

                    <i class="fa fa-folder"></i> <span>用户管理模块</span>

                    <span class="pull-right-container">

                        <i class="fa fa-angle-left pull-right"></i>

                    </span>

                </a>

                <ul class="treeview-menu">

                    <li id="admin-login">

                        <a href="all-admin-login.html">

                            <i class="fa fa-circle-o"></i> 权限修改

                        </a>

                    </li>

                    <li id="admin-register">

                        <a href="all-admin-register.html">

                            <i class="fa fa-circle-o"></i> 密码修改

                        </a>

                    </li>

                </ul>

            </li>

            <li class="treeview">

                <a href="#">

                    <i class="fa fa-pie-chart"></i> <span>数据库管理模块</span>

                    <span class="pull-right-container">

                        <i class="fa fa-angle-left pull-right"></i>

                    </span>

                </a>

                <ul class="treeview-menu">

                    <li id="charts-chartjs">

                        <a href="all-charts-chartjs.html">

                            <i class="fa fa-circle-o"></i> 01 基本信息

                        </a>

                    </li>

                    <li id="charts-morris">

                        <a href="all-charts-morris.html">

                            <i class="fa fa-circle-o"></i> 02 尺寸检验

                        </a>

                    </li>

                    <li id="charts-flot">

                        <a href="all-charts-flot.html">

                            <i class="fa fa-circle-o"></i> 03 机械性能

                        </a>

                    </li>

                    <li id="charts-inline">

                        <a href="all-charts-inline.html">

                            <i class="fa fa-circle-o"></i> 04 化学成分

                        </a>

                    </li>

                    <li id="charts-manager">

                        <a href="all-charts-inline.html">

                            <i class="fa fa-circle-o"></i> 05 检测结果

                        </a>

                    </li>

                </ul>

            </li>

            <li class="treeview">

                <a href="#">

                    <i class="fa fa-laptop"></i> <span>质量证明书管理模块</span>

                    <span class="pull-right-container">

                        <i class="fa fa-angle-left pull-right"></i>

                    </span>

                </a>

                <ul class="treeview-menu">

                    <li id="elements-general">

                        <a href="all-elements-general.html">

                            <i class="fa fa-circle-o"></i> 标准 General

                        </a>

                    </li>

                    <li id="elements-icons">

                        <a href="all-elements-icons.html">

                            <i class="fa fa-circle-o"></i> 图标 Icons

                        </a>

                    </li>

                    <li id="elements-buttons">

                        <a href="all-elements-buttons.html">

                            <i class="fa fa-circle-o"></i> 按钮 Buttons

                        </a>

                    </li>

                    <li id="elements-sliders">

                        <a href="all-elements-sliders.html">

                            <i class="fa fa-circle-o"></i> 滑块 Sliders

                        </a>

                    </li>

                    <li id="elements-timeline">

                        <a href="all-elements-timeline.html">

                            <i class="fa fa-circle-o"></i> 时间线 Timeline

                        </a>

                    </li>

                    <li id="elements-modals">

                        <a href="all-elements-modals.html">

                            <i class="fa fa-circle-o"></i> 对话框样式 Modals

                        </a>

                    </li>

                    <li id="elements-widgets">

                        <a href="all-elements-widgets.html">

                            <i class="fa fa-circle-o"></i> 窗体小部件 widgets

                        </a>

                    </li>

                </ul>

            </li>

            <li class="treeview">

                <a href="#">

                    <i class="fa fa-edit"></i> <span>表单 Forms</span>

                    <span class="pull-right-container">

                        <i class="fa fa-angle-left pull-right"></i>

                    </span>

                </a>

                <ul class="treeview-menu">

                    <li id="form-general">

                        <a href="all-form-general.html">

                            <i class="fa fa-circle-o"></i> 基础表单元素

                        </a>

                    </li>

                    <li id="form-advanced">

                        <a href="all-form-advanced.html">

                            <i class="fa fa-circle-o"></i> 高级表单元素

                        </a>

                    </li>

                    <li id="form-editors">

                        <a href="all-form-editors.html">

                            <i class="fa fa-circle-o"></i> 编辑器

                        </a>

                    </li>

                </ul>

            </li>

            <li class="treeview">

                <a href="#">

                    <i class="fa fa-table"></i> <span>表格 tables</span>

                    <span class="pull-right-container">

                        <i class="fa fa-angle-left pull-right"></i>

                    </span>

                </a>

                <ul class="treeview-menu">

                    <li id="tables-simple">

                        <a href="all-tables-simple.html">

                            <i class="fa fa-circle-o"></i> 简单表格

                        </a>

                    </li>

                    <li id="tables-data">

                        <a href="all-tables-data.html">

                            <i class="fa fa-circle-o"></i> 数据表格

                        </a>

                    </li>

                </ul>

            </li>

        </ul>

    </section>

    <!-- /.sidebar -->

</aside>

部分截图：

要引入侧边栏的html文件中添加如下代码：

在相应的位置添加侧边栏代码：

<script>

    $(function(){

        /*公共部分

         * 导航栏

         * footer CopyRight

         */

        $(".adminsidebar").load("adminsidebar.html");

    });

</script>

效果图：

024 如何让html引用公共的头部和尾部（多个html文件公用一个header.html和footer.html）的更多相关文章

  1. 如何让html引用公共布局（多个html文件公用一个header.html和footer.html）

    如何实现多个.html静态页,引用同一个header.html和footer.html文件? 直接上代码: 公共头部文件:header.html //不用写标准的html文档格式 <div> ...

  2. 多个页面引用公共的头部 header.html 和尾部 footer.html

    方法:通过load()函数,引入公共头部和尾部文件; js代码预览: $(".headerPage").load("header.html"); $(" ...

  3. CodeIgniter怎么引入公共的头部或者尾部文件(实现随意引入或分区域创建header.html,bodyer.html,footer.html)

    除非你天赋异禀,凡事基本对任何人来说都是开头难的,且开头的事情如果没有做好 往往会打掉一个人对于某件事的希望及其激情,所以咱们先从容易的事情开始慢慢建立自己 信心.后面的事情咱们再慢慢推进. 如果你是 ...

  4. html 如何引入一个公共的头部和底部

    2016-01-08 作者案:尽己之力,用心打造一个商城!当你有十二分力气时,发现用了十分力气依旧没什么进展,请不要放弃希望:或许你想得到的东西正在十二分力气的地方等你:假若你用尽了十二分力气,还是没 ...

  5. ASP.NET MVC 使用分部视图制作公共头部，尾部，并通过ViewBag传值

    一:新建分部视图 二:布局页_Layout.cshtml上调用 不灵活,不能传递数据,引用静态公共部分 @Html.Partial("_Head") @Html.Partial(& ...

  6. vue引用公用的头部和尾部文件。

    我创建了一个header.vue和fotter.vue,用来做于网站的头部和尾部,每个页面都需要引用这两个,我以组件的方式,来引用这样只需要添加注册的组件就可以了. 第一步.在components文件 ...

  7. 前端引用公共html模块方案

    最近临时一个负责公司官网的妹纸请假,于是临时接手了下官网的项目,官网都是静态页面,算是很简单的,但发现页面挺多,而每个页面总有部分是和其他页面一模一样的,比如页头.页尾等,这样就导致一个地方的修改要在 ...

  8. linux ln 建立软链接-- 基于dubbo-zookeeper服务的 服务jar 引用公共的 lib

    对于ln命令网上有很多的教程,这里不再复述, 其基本目的是:多个文件夹公用一个文件夹的里的文件. 其基本命令格式: ln [option] source_file dist_file (source_ ...

  9. 引用公共页面的js函数报错

    对于网站来说很多页面之间都有着大量的共享模块,如页头,页脚和用户栏等.很多时候为了方便.省事,我们在公共模块写函数,然后在别的页面里调用.但我们在引用公共的js函数时,有些可以引用,有些却报错:这是因 ...

随机推荐

  1. Linux用户和权限——管理文件权限的命令

    Linux用户和权限——管理文件权限的命令 摘要:本文主要学习了Linux中修改文件权限的命令. chown命令 chown命令,主要用于修改文件(或目录)的所有者,除此之外,这个命令也可以修改文件( ...

  2. VMware——虚拟机的安装

    VMware——虚拟机的安装 摘要:本文主要记录了虚拟机的安装过程. 下载 可以去官网或者其他可靠站点下载虚拟机的安装包. 这次用的版本是:VMware-workstation-full-14.1.7 ...

  3. SAP MM 同一个序列号可以被多次用在交货单发货过账？

    SAP MM 同一个序列号可以被多次用在交货单发货过账? 如下公司间转储订单,从公司代码CSAS转入公司代码HKCS, 物料有启用序列号管理. 转储数量为5 PC.该STO单据共计有2个外向交货单 8 ...

  4. swift（二）swift字符串和字符和逻辑运算

    /* 1.swift字符串和字符 2.构造字符串 3.字符串比较 4.数值运算 5.复制运算 6.关系运算 7.逻辑运算 8.区间运算 */ /* //数据 + 数据的处理 //字符信息+ 字符信息的 ...

  5. Scrum 冲刺第一篇

      我们是这次稳了队,队员分别是温治乾,黄思扬,莫少政,余泽端,江海灵 码云地址为:https://gitee.com/sixers/activityWall-Web 一.各个成员在 Alpha 阶段 ...

  6. Django框架（二十三）-- Django rest_framework-视图组件

    一.基本视图 class PublishView(APIView): def get(self, request): publish_list = Publish.objects.all() bs = ...

  7. [linux] 多进程和多线程

    1.在Linux系统下,启动一个新的进程必须分配给它独立的地址空间,建立众多的数据表来维护它的代码段.堆栈段和数据段,这是一种”昂贵”的多任务工作方式.2.而运行于一个进程中的多个线程,它们彼此之间使 ...

  8. 2015年第六届蓝桥杯C/C++程序设计本科B组决赛 ——居民集会(编程大题)

    标题:居民集会 蓝桥村的居民都生活在一条公路的边上,公路的长度为L,每户家庭的 位置都用这户家庭到公路的起点的距离来计算,第i户家庭距起点的距 离为di.每年,蓝桥村都要举行一次集会.今年,由于村里的 ...

  9. 201871010102-常龙龙《面向对象程序设计（java）》第十七周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...

  10. 201871010111-刘佳华《面向对象程序设计（java）》第二周学习总结

    201871010111-刘佳华<面向对象程序设计(java)>第二周学习总结 项目 内容 这个作业属于哪个课程 <https://www.cnblogs.com/nwnu-daiz ...