024 如何让html引用公共的头部和尾部（多个html文件公用一个header.html和footer.html）
前端静态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）的更多相关文章
- 如何让html引用公共布局（多个html文件公用一个header.html和footer.html）
如何实现多个.html静态页,引用同一个header.html和footer.html文件? 直接上代码: 公共头部文件:header.html //不用写标准的html文档格式 <div> ...
- 多个页面引用公共的头部 header.html 和尾部 footer.html
方法:通过load()函数,引入公共头部和尾部文件; js代码预览: $(".headerPage").load("header.html"); $(" ...
- CodeIgniter怎么引入公共的头部或者尾部文件(实现随意引入或分区域创建header.html,bodyer.html,footer.html)
除非你天赋异禀,凡事基本对任何人来说都是开头难的,且开头的事情如果没有做好 往往会打掉一个人对于某件事的希望及其激情,所以咱们先从容易的事情开始慢慢建立自己 信心.后面的事情咱们再慢慢推进. 如果你是 ...
- html 如何引入一个公共的头部和底部
2016-01-08 作者案:尽己之力,用心打造一个商城!当你有十二分力气时,发现用了十分力气依旧没什么进展,请不要放弃希望:或许你想得到的东西正在十二分力气的地方等你:假若你用尽了十二分力气,还是没 ...
- ASP.NET MVC 使用分部视图制作公共头部，尾部，并通过ViewBag传值
一:新建分部视图 二:布局页_Layout.cshtml上调用 不灵活,不能传递数据,引用静态公共部分 @Html.Partial("_Head") @Html.Partial(& ...
- vue引用公用的头部和尾部文件。
我创建了一个header.vue和fotter.vue,用来做于网站的头部和尾部,每个页面都需要引用这两个,我以组件的方式,来引用这样只需要添加注册的组件就可以了. 第一步.在components文件 ...
- 前端引用公共html模块方案
最近临时一个负责公司官网的妹纸请假,于是临时接手了下官网的项目,官网都是静态页面,算是很简单的,但发现页面挺多,而每个页面总有部分是和其他页面一模一样的,比如页头.页尾等,这样就导致一个地方的修改要在 ...
- linux ln 建立软链接-- 基于dubbo-zookeeper服务的 服务jar 引用公共的 lib
对于ln命令网上有很多的教程,这里不再复述, 其基本目的是:多个文件夹公用一个文件夹的里的文件. 其基本命令格式: ln [option] source_file dist_file (source_ ...
- 引用公共页面的js函数报错
对于网站来说很多页面之间都有着大量的共享模块,如页头,页脚和用户栏等.很多时候为了方便.省事,我们在公共模块写函数,然后在别的页面里调用.但我们在引用公共的js函数时,有些可以引用,有些却报错:这是因 ...
随机推荐
- 软件设计师14-UML建模
UML图 用例图 用例图:参与者.用例 用例之间的关系:包含关系.扩展关系.泛化关系. 用例的包含关系:查询数据外借信息包含用户登录. 用例的扩展关系:修改之前要先查询,则修改信息包含查询信息用例 类 ...
- 英语_金丝楠是紫楠(phoebeSheareri)的别名
姚黄魏紫俱凋零--红木家具今古谈(连载七) [上海木业网]楠木品种包括闽楠.细叶楠.红毛山楠.滇楠.白楠.紫楠.乌心楠.桢楠.水楠.香楠等二百余种之多,1997年的木材国家标准中就列入了八种.某些售卖 ...
- swift（一）基础变量类型
import Foundation println("Hello, World!") /* int a; */ var a = //隐式类型转换 a = println(a) le ...
- 理解Java方法增强
在实际开发中,我们往往需要对某些方法进行增强,常用的方法增强的方式有三种. 类继承 .方法覆盖 必须控制对象创建,才能使用该方式 装饰者模式方法加强 必须和目标对象实现相同接口或继续相同父类,特殊构造 ...
- 【Linux】扩展阿里云数据盘分区和文件系统
扩容云盘只是扩大存储容量,不会扩容文件系统 一.准备工作 在扩展数据盘扩展分区和文件系统前,请提前完成以下工作. 创建快照以备份数据,防止操作失误导致数据丢失. 通过ECS控制台或者API扩容云盘容量 ...
- redis高并发总结
Redis是单线程的,省去了很多上下文切换线程的时间:(官方答案:因为Redis是基于内存的操作,CPU不是Redis的瓶颈,Redis的瓶颈最有可能是机器内存的大小或者网络带宽.既然单线程容易实现, ...
- 【IDE_IntelliJ IDEA】IDEA中使用Junit插件自动创建测试用例到test目录
第一步 从插件资源库中搜索JunitGenerator V2.0插件并安装 第二步 配置测试用例的生成目录 1.打开File->Settings 2.搜索junit,找到JUnit Genera ...
- Python列表操作与深浅拷贝（7）——列表深浅拷贝、删除、反转、排序
列表复制 浅拷贝:简单类型元素全复制,引用类型元素只复制引用 L1 = [3,2,1,[4,5,6],8,'abc'] L1 [3, 2, 1, [4, 5, 6], 8, 'abc'] L2 = L ...
- Delphi-基础（for循环）
1.判断0~10之间,当循环I=3时候跳出当前循环,当I等于8时候,退出当前循环. procedure Countand(); var I: Integer; begin do begin Write ...
- 006-OpenStack-配仪表盘
OpenStack-配仪表盘 [基于此文章的环境]点我快速打开文章 计算节点安装(compute1) 1.安装 yum install openstack-dashboard -y &> ...