前端静态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>
效果图：
