头部:例如

<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加载的更多相关文章

  1. vue项目中主要文件的加载顺序(index.html、App.vue、main.js)

    先后顺序: index.html > App.vue的export外的js代码 > main.js > App.vue的export里面的js代码 > Index.vue的ex ...

  2. 常用js,css文件统一加载方法,并在加载之后调用回调函数

    原创内容,转载请注明出处! 为了方便资源管理和提升工作效率,常用的js和css文件的加载应该放在一个统一文件里面完成,也方便后续的资源维护.所以我用js写了以下方法,存放在“sourceControl ...

  3. nginx设置反向代理后,页面上的js css文件无法加载

    问题现象: nginx配置反向代理后,网页可以正常访问,但是页面上的js css文件无法加载,页面样式乱了. (1)nginx配置如下: (2)域名访问:js css文件无法加载: (3)IP访问:j ...

  4. 使用js加载器动态加载外部Javascript文件

    原文:http://www.cnblogs.com/xdp-gacl/p/3927417.html 今天在网上找到了一个可以动态加载js文件的js加载器,具体代码如下: JsLoader.js var ...

  5. 动态加载JS文件,并根据JS文件的加载状态来执行自己的回调函数

    动态加载JS文件,并根据JS文件的加载状态来执行自己的回调函数, 在很多场景下,我们需要在动态加载JS文件的时候,根据加载的状态来进行后续的操作,需要在JS加载成功后,执行另一方法,这个方法是依托在加 ...

  6. nginx反向代理转发后页面上的js css文件无法加载【原创】

    故障现象:nginx做代理转发后,发现页面上的js css文件无法加载,页面样式乱了. 原因:没有配置静态资源 解决js css文件无法加载无法访问的问题 解决办法: 修改配置文件nginx.conf ...

  7. nginx设置反向代理后端jenklins,页面上的js css文件无法加载

    转载 2017年06月14日 22:36:59 8485 问题现象: nginx配置反向代理后,网页可以正常访问,但是页面上的js css文件无法加载,页面样式乱了. (1)nginx配置如下: (2 ...

  8. JavaScript学习总结(十九)——使用js加载器动态加载外部Javascript文件

    今天在网上找到了一个可以动态加载js文件的js加载器,具体代码如下: JsLoader.js 1 var MiniSite=new Object(); 2 /** 3 * 判断浏览器 4 */ 5 M ...

  9. 小程序页面的四种文件(JSON、WXML、WXSS、JS)加载顺序

    一个小程序页面由四种文件组成: 1)json 页面配置文件 2)js 页面逻辑文件(必需) 3)wxml 页面结构文件(必需) 4)wxss 页面样式文件 这四个文件的加载顺序: 第一步: 加载页面j ...

随机推荐

  1. PCA 实例演示二维数据降成1维

    import numpy as np # 将二维数据降成1维 num = [(2.5, 2.4), (0.5, 0.7), (2.2, 2.9), (1.9, 2.2), (3.1, 3.0), (2 ...

  2. 队列--数据结构与算法JavaScript描述(5)

    队列 Queue 概念 队列是一种列表,但队列只能在队尾插入元,在队首删除元素. 队列是一种先进先出的数据结构,用于存储按顺序排列的数据,被用在很多地方,比如提交操作系统执行的一系列进程.打印任务池等 ...

  3. Redis和Mecahe的简介

    Memcache介绍 概念:Memcache是一个高性能,分布式内存对象缓存系统,通过在内存里维护一个统一的巨大的hash表,它能够用来存储各种格式的数据,包括图像.视频.文件以及数据库检索的结果等. ...

  4. 3670: [Noi2014]动物园

    题目链接 题意:给n个字符串,求出每个字符串的num值,加1后相乘.num[i]表示1~i中,有多少没有重叠的公共前缀后缀. 分析: kmp中p数组表示最大的公共前缀后缀.设一cnt数组,表示1~i中 ...

  5. Android 支付宝H5 没有回调

    今天测试反馈问题,说,手机上没有安装支付宝的,调用支付宝支付之后,没有回调.不提示成功也不提示失败. 我自己试了半天也都是没有问题 .后来终于可以试出来了. 发现原来是,清单里面注册的Activity ...

  6. css3 3D

    开通黄钻 Css3 -3D效果<!DOCTYPE html><html lang="en"><head> <meta charset=&q ...

  7. 两个category方法相同调用哪个

    Category扩展,它是对一个类进行功能的扩展.在项目的开发过程中,在不断的迭代开发过程中,我们的类也不可避免的要根据需求来增加新的功能,而这个时候很多的人可能会新建一个子类,然后在子类中去增加我们 ...

  8. 打开Vim/Vi代码高亮

    由于新装Vim/Vi 默认是没有打开代码高亮配置的,就看到有朋友一次次到网上去找各种配置.其实Vim默认带来配置文件的样本的,只需拷贝过来就可使用. 在用户根目录(~)中新建vim的配置文件 .vim ...

  9. java日期格式化(util包下转成sql包下)

    package test; import java.text.SimpleDateFormat;import java.util.Date;import java.util.Scanner; publ ...

  10. Python 3基础教程4-变量

    本文介绍变量,什么是变量呢,可以这样理解:变量是一个容器,这个容器可以用来存储值,而且可以被其他对象引用. 看看下面的demo.py # 这里介绍 变量 # 变量可以是数字var1 = 5print( ...