网页公用部分用JS动态加载 JS加导航焦点

106 阅读 0 评论 70 点赞

我是靠谱客的博主活力板凳，最近开发中收集的这篇文章主要介绍网页公用部分用JS动态加载 JS加导航焦点，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

如果导航在所有页面为共用，则提取出来，放进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);
});