如果导航在所有页面为共用，则提取出来，放进js，通过js动态加载。
HTML代码：
<ul class="nav nav-list" id="menu"> </ul>
HTML页面尾部<body>内添加下面代码，如果当前页面存在于导航内，则注释掉url这一句，如果不存在于导航内，则不注释url这一句。
<script type="text/javascript">
//url = "everyday_students_xx.html";
</script>
JS代码：
var menu = []; menu.push('<li class="">', '<a href="index.html">', '<i class="menu-icon fa fa-home"></i>', '<span class="menu-text"> 系统主页 </span>', '</a>', '<b class="arrow"></b>', '</li>'); menu.push('<li class="">', '<a href="" class="dropdown-toggle">', '<i class="menu-icon glyphicon glyphicon-user"></i>', '<span class="menu-text"> 学生中心 </span>', '<b class="arrow fa fa-angle-down"></b>', '</a>', '<b class="arrow"></b>', '<ul class="submenu">', '<li class=""><a href="apply_my.html" ><i class="menu-icon fa fa-caret-right"></i>我的申请</a></li>', '<li class=""><a href="apply_tssq.html" ><i class="menu-icon fa fa-caret-right"></i>调宿申请</a></li>', '<li class=""><a href="apply_lx.html" ><i class="menu-icon fa fa-caret-right"></i>寒暑假留校申请</a></li>', '<li class=""><a href="apply_xwzs.html" ><i class="menu-icon fa fa-caret-right"></i>校外住宿申请</a></li>', '<li class=""><a href="apply_hs.html" ><i class="menu-icon fa fa-caret-right"></i>回宿申请</a></li>', '<li class=""><a href="apply_ts.html" ><i class="menu-icon fa fa-caret-right"></i>退宿申请</a></li>', '</ul>', '</li>'); menu.push('<li class="">', '<a href="students_base.html">', '<i class="menu-icon fa fa-users"></i>', '<span class="menu-text"> 学生基本信息采集及管理 </span>', //'<b class="arrow fa fa-angle-down"></b>', '</a>', '<b class="arrow"></b>', //'<ul class="submenu">', // '<li class=""><a href="template_list.html" ><i class="menu-icon fa fa-caret-right"></i>我的私信</a></li>', // '<li class=""><a href="oa_my.html" ><i class="menu-icon fa fa-caret-right"></i>我的私信</a></li>', // '</ul>', '</li>'); menu.push('<li class="">', '<a href="#" class="dropdown-toggle">', '<i class="menu-icon glyphicon glyphicon-th"></i>', '<span class="menu-text"> 宿舍基础信息管理 </span>', '<b class="arrow fa fa-angle-down"></b>', '</a>', '<b class="arrow"></b>', '<ul class="submenu">', '<li class=""><a href="dormitorys_sq.html" ><i class="menu-icon fa fa-caret-right"></i>社区管理</a></li>', '<li class=""><a href="dormitorys_ly.html" ><i class="menu-icon fa fa-caret-right"></i>楼宇管理</a></li>', '<li class=""><a href="dormitorys_dy.html" ><i class="menu-icon fa fa-caret-right"></i>单元管理</a></li>', '<li class=""><a href="dormitorys_lc.html" ><i class="menu-icon fa fa-caret-right"></i>楼层管理</a></li>', '<li class=""><a href="dormitorys_ss.html" ><i class="menu-icon fa fa-caret-right"></i>宿舍管理</a></li>', '<li class=""><a href="dormitorys_cw.html" ><i class="menu-icon fa fa-caret-right"></i>床位管理</a></li>', '</ul>', '</li>'); menu.push('<li class="">', '<a href="#" class="dropdown-toggle">', '<i class="menu-icon fa fa-globe"></i>', '<span class="menu-text"> 宿舍学生信息管理 </span>', '<b class="arrow fa fa-angle-down"></b>', '</a>', '<b class="arrow"></b>', '<ul class="submenu">', '<li class=""><a href="everyday_students_xx.html" ><i class="menu-icon fa fa-caret-right"></i>住宿学生基本信息</a></li>', '<li class=""><a href="everyday_students_report.html" ><i class="menu-icon fa fa-caret-right"></i>住宿人数统计</a></li>', '</ul>', '</li>'); menu.push('<li class="">', '<a href="#" class="dropdown-toggle">', '<i class="menu-icon fa fa-desktop"></i>', '<span class="menu-text"> 宿舍日常管理 </span>', '<b class="arrow fa fa-angle-down"></b>', '</a>', '<b class="arrow"></b>', '<ul class="submenu">', '<li class=""><a href="everyday_wj.html" ><i class="menu-icon fa fa-caret-right"></i>宿舍违纪管理</a></li>', '<li class=""><a href="everyday_th.html" ><i class="menu-icon fa fa-caret-right"></i>宿舍调换管理</a></li>', '<li class=""><a href="everyday_lx.html" ><i class="menu-icon fa fa-caret-right"></i>寒暑假留校管理</a></li>', '<li class=""><a href="everyday_xwzs.html" ><i class="menu-icon fa fa-caret-right"></i>校外住宿信息管理</a></li>', '<li class=""><a href="everyday_ts.html" ><i class="menu-icon fa fa-caret-right"></i>学生退宿管理</a></li>', '<li class=""><a href="everyday_hs.html" ><i class="menu-icon fa fa-caret-right"></i>学生回宿管理</a></li>', '</ul>', '</li>'); menu.push('<li class="">', '<a href="dormitory_resources.html">', '<i class="menu-icon glyphicon glyphicon-search"></i>', '<span class="menu-text"> 宿舍资源查询 </span>', //'<b class="arrow fa fa-angle-down"></b>', '</a>', '<b class="arrow"></b>', //'<ul class="submenu">', // '<li class=""><a href="template_list.html" ><i class="menu-icon fa fa-caret-right"></i>宿舍学生信息</a></li>', // '</ul>', '</li>'); menu.push('<li class="">', '<a href="dynamic_information.html">', '<i class="menu-icon glyphicon glyphicon-list-alt "></i>', '<span class="menu-text"> 动态信息管理 </span>', //'<b class="arrow fa fa-angle-down"></b>', '</a>', '<b class="arrow"></b>', //'<ul class="submenu">', // '<li class=""><a href="template_list.html" ><i class="menu-icon fa fa-caret-right"></i>宿舍学生信息</a></li>', // '</ul>', '</li>'); menu.push('<li class="">', '<a href="basicinformation_statistics.html">', '<i class="menu-icon fa fa-bar-chart-o "></i>', '<span class="menu-text"> 宿舍基本信息数据统计 </span>', //'<b class="arrow fa fa-angle-down"></b>', '</a>', '<b class="arrow"></b>', //'<ul class="submenu">', // '<li class=""><a href="template_list.html" ><i class="menu-icon fa fa-caret-right"></i>宿舍学生信息</a></li>', // '</ul>', '</li>'); menu.push('<li class="">', '<a href="#" class="dropdown-toggle">', '<i class="menu-icon fa fa-cog"></i>', '<span class="menu-text"> 系统管理 </span>', '<b class="arrow fa fa-angle-down"></b>', '</a>', '<b class="arrow"></b>', '<ul class="submenu">', '<li class=""><a href="sys_sqgl.html" ><i class="menu-icon fa fa-caret-right"></i>社区管理</a></li>', '<li class=""><a href="sys_qxgl.html" ><i class="menu-icon fa fa-caret-right"></i>权限管理</a></li>', '<li class=""><a href="sys_sjys.html" ><i class="menu-icon fa fa-caret-right"></i>数据预置</a></li>', '<li class=""><a href="sys_xtrz.html" ><i class="menu-icon fa fa-caret-right"></i>系统日志</a></li>', '<li class=""><a href="sys_sjbf.html" ><i class="menu-icon fa fa-caret-right"></i>数据备份</a></li>', '</ul>', '</li>');
JS文件里面加焦点代码：
var url = ""; $(function () { var href=""; var html = $(menu.join('')); if(url==""){ url = window.location.href.split('/'); href = url[url.length - 1]; href = href.replace("#",""); }else{ href = url; } var activemuen = html.find('a[href="' + href + '"]'); activemuen.parent().addClass("active"); activemuen.parent().parent().parent().addClass("active open"); $("#menu").html(html); });