网页公用部分用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);
});

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

推荐阅读