公共文件js加载
头部:例如
<header id="header" class="clearfix">
<a class="col-xs-9"><img src="img/lib/logo.png" alt=""></a>
<div class="col-xs-3 nav_tit text-right"><i class="ion-navicon"></i></
<div class="nav_content">
<ul>
<li class="active"><a href="">首页</a></li>
<li><a href="">公司简介</a></li>
<li><a href="">新闻</a></li>
<li><a href="">资讯</a></li>
<li><a href="">导师团队</a></li>
<li><a href="">项目峰会</a></li>
<li><a href="">医疗</a></li>
<li><a href="">视频总汇</a></li>
<li><a href="">联系我们</a></li>
</ul>
</div>
</header>
改为js模板:
document.write('<header id="header" class="clearfix"><a class="col-xs-9"><img src="img/lib/logo.png" alt=""></a><div class="col-xs-3 nav_tit text-right"><i class="ion-navicon"></i></div><div class="nav_content"><ul><li class=""><a href="">首页</a></li><li><a href="">公司简介</a></li><li><a href="">新闻</a></li><li><a href="">资讯</a></li><li><a href="">导师团队</a></li><li><a href="">项目峰会</a></li><li><a href="">医疗</a></li><li><a href="">视频总汇</a></li><li><a href="">联系我们</a></li></ul></div></header>');
//控制样式
(function () {
var header_module = document.getElementById('header_module');
var header = document.getElementById('header');
var nav = header.getElementsByClassName('nav_content')[0];
var li = nav.getElementsByTagName('li');
var a = nav.getElementsByTagName('a');
var index = header_module.getAttribute('data-active');
li[index].className = 'active';
a[0].setAttribute('href','index.html'); //添加href
})();
引入js文件:注意给标签写上id
// data-active 为控制导航选中的样式
<script id="header_module" src="js/header.js" data-active="0"></script>
结束。
html代码在线压缩:http://tool.oschina.net/jscompress?type=2
公共文件js加载的更多相关文章
- vue项目中主要文件的加载顺序(index.html、App.vue、main.js)
先后顺序: index.html > App.vue的export外的js代码 > main.js > App.vue的export里面的js代码 > Index.vue的ex ...
- 常用js,css文件统一加载方法,并在加载之后调用回调函数
原创内容,转载请注明出处! 为了方便资源管理和提升工作效率,常用的js和css文件的加载应该放在一个统一文件里面完成,也方便后续的资源维护.所以我用js写了以下方法,存放在“sourceControl ...
- nginx设置反向代理后,页面上的js css文件无法加载
问题现象: nginx配置反向代理后,网页可以正常访问,但是页面上的js css文件无法加载,页面样式乱了. (1)nginx配置如下: (2)域名访问:js css文件无法加载: (3)IP访问:j ...
- 使用js加载器动态加载外部Javascript文件
原文:http://www.cnblogs.com/xdp-gacl/p/3927417.html 今天在网上找到了一个可以动态加载js文件的js加载器,具体代码如下: JsLoader.js var ...
- 动态加载JS文件,并根据JS文件的加载状态来执行自己的回调函数
动态加载JS文件,并根据JS文件的加载状态来执行自己的回调函数, 在很多场景下,我们需要在动态加载JS文件的时候,根据加载的状态来进行后续的操作,需要在JS加载成功后,执行另一方法,这个方法是依托在加 ...
- nginx反向代理转发后页面上的js css文件无法加载【原创】
故障现象:nginx做代理转发后,发现页面上的js css文件无法加载,页面样式乱了. 原因:没有配置静态资源 解决js css文件无法加载无法访问的问题 解决办法: 修改配置文件nginx.conf ...
- nginx设置反向代理后端jenklins,页面上的js css文件无法加载
转载 2017年06月14日 22:36:59 8485 问题现象: nginx配置反向代理后,网页可以正常访问,但是页面上的js css文件无法加载,页面样式乱了. (1)nginx配置如下: (2 ...
- JavaScript学习总结(十九)——使用js加载器动态加载外部Javascript文件
今天在网上找到了一个可以动态加载js文件的js加载器,具体代码如下: JsLoader.js 1 var MiniSite=new Object(); 2 /** 3 * 判断浏览器 4 */ 5 M ...
- 小程序页面的四种文件(JSON、WXML、WXSS、JS)加载顺序
一个小程序页面由四种文件组成: 1)json 页面配置文件 2)js 页面逻辑文件(必需) 3)wxml 页面结构文件(必需) 4)wxss 页面样式文件 这四个文件的加载顺序: 第一步: 加载页面j ...
随机推荐
- (转)数据库老兵:NewSQL才是未来
编者按:在数据库技术领域,Michael Stonebraker几乎是无人不知无人不晓的人物.现年70岁的Stonebraker不仅是Ingres和PostgreSQL的创始人,同时在Informix ...
- ubuntu配置命令
sudo apt-get update 更新源 sudo apt-get install package 安装包 sudo apt-get remove package 删除包 sudo apt-ca ...
- python学习之循环语句
编程语言中的循环语句,以循环判断达式是否成立为条件,若表达式成立则循环执行该表达式,若不成立则跳出当前执行执行语句且继续执行其后代码. 如下图所示. Python中提供以下循环方式 循环类型 描述 w ...
- Skyscrapers Covered in Solar Pancels【太阳能电池板覆盖的摩天大楼】
Skyscrapers Covered in Solar Panels An office tower on Miller Stree in Manchester is completely cove ...
- 状压DP详解(位运算)
前言: 状压DP是一种非常暴力的做法(有一些可以排除某些状态的除外),例如dp[S][v]中,S可以代表已经访问过的顶点的集合,v可以代表当前所在的顶点为v.S代表的就是一种状态(二进制表示),比如 ...
- B1086 就不告诉你 (15分)
B1086 就不告诉你 (15分) 做作业的时候,邻座的小盆友问你:"五乘以七等于多少?"你应该不失礼貌地围笑着告诉他:"五十三."本题就要求你,对任何一对给定 ...
- 初见akka-02:rpc框架
1.RPC:简单点说,就是多线程之间的通信,我们今天用了scala以及akka 来简单的实现了 rpc框架的一些简单的内容,一脸包括了,心跳,间隔时间, 注册以及一些问题, 模式匹配的一些东西,虽然比 ...
- P1133 教主的花园
P1133 教主的花园 题目描述 教主有着一个环形的花园,他想在花园周围均匀地种上n棵树,但是教主花园的土壤很特别,每个位置适合种的树都不一样,一些树可能会因为不适合这个位置的土壤而损失观赏价值. 教 ...
- python lamba表达式
lambda函数也叫匿名函数,即,函数没有具体的名称. g=lambda x:x**2 def f(x): return x**2 lambda语句中,冒号前是参数,可以有多个,用逗号隔开,冒号右边是 ...
- Java代码中获取配置文件(config.properties)中内容的两种方法
方法千千万,本人暂时只总结了两种方法. (1)config.properties中的内容如图 在applicationContext.xml中配置 <!-- 引入配置文件 --> < ...