網頁公用部分用JS動態加載 JS加導航焦點

時間 2019-12-11

標籤網頁公用部分動態加載導航焦點欄目 HTML 简体版

原文原文鏈接

若是導航在全部頁面爲共用，則提取出來，放進js，經過js動態加載。

HTML代碼：javascript

<ul class="nav nav-list" id="menu">

</ul>

HTML頁面尾部<body>內添加下面代碼，若是當前頁面存在於導航內，則註釋掉url這一句，若是不存在於導航內，則不註釋url這一句。html

<script type="text/javascript">
    //url = "everyday_students_xx.html";
</script>

JS代碼：java

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文件裏面加焦點代碼：app

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);
});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。