1. 首页
  2. 文章中心
  3. JavaScript

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

107 阅读 0 评论
我是靠谱客的博主 活力板凳，这篇文章主要介绍网页公用部分用JS动态加载 JS加导航焦点，现在分享给大家，希望可以做个参考。

如果导航在所有页面为共用，则提取出来，放进js，通过js动态加载。

HTML代码：

复制代码
1
2
<ul class="nav nav-list" id="menu">
</ul>

 

 HTML页面尾部<body>内添加下面代码，如果当前页面存在于导航内，则注释掉url这一句，如果不存在于导航内，则不注释url这一句。

复制代码
1
2
3
<script type="text/javascript">
//url = "everyday_students_xx.html";
</script>


JS代码：

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
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文件里面加焦点代码：

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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);
});

 

转载于:https://www.cnblogs.com/pheosia/p/6734350.html

最后

以上就是活力板凳最近收集整理的关于网页公用部分用JS动态加载 JS加导航焦点的全部内容，更多相关网页公用部分用JS动态加载内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(71)

相关文章

Html 页面信息抽取
Html 页面信息抽取
Ajax异步加载，实现真正意义上，公共页面的包含
Ajax异步加载，实现真正意义上，公共页面的包含
公共js在页面底部加载时的注意事项
公共js在页面底部加载时的注意事项
怎么将大量引入的js文件放入公共的页面中
怎么将大量引入的js文件放入公共的页面中
网页公用部分用JS动态加载 JS加导航焦点
网页公用部分用JS动态加载 JS加导航焦点
如何将其他页面都引用的js提取到公共的一个js
如何将其他页面都引用的js提取到公共的一个js
Html5 与CSS3中的新特性
Html5 与CSS3中的新特性
公共js在页面底部加载的注意事项
公共js在页面底部加载的注意事项

评论列表共有 0 条评论

立即
投稿
返回
顶部