导航html结构为:

<div class="header2-nav">
<a href="index.html">首页</a>
<a href="course.html">课程page</a>
<a href="teach.html">教学page</a>
<a href="booking.html">预约page</a>
<a href="location.html">校区page</a>
</div>

当前页面的url地址例子:http://testXXX.com/index.html

let urlArr = window.location.href.split('/')
let current = urlArr[urlArr.length-1] //最后一个斜杠后面的导航标识
//let navArr = ['index.html','course.html','teach.html','booking.html','location.html']

let nav = document.getElementsByClassName('header2-nav')[0].children
let navArr = []

// 获取导航里面的所有的href的属性值
for(let i = 0;i<nav.length;i+=1){
navArr[i] = nav[i].attributes[0].nodeValue
}

//遍历导航数组与当前匹配的的导航加标示className
navArr.forEach((value,index)=>{
if(value.indexOf(current) === 0){ //导航后面可能会有锚点不能用===
document.getElementsByClassName('header2-nav')[0].children[index].className='active'
}
})

原生js标识当前导航位置(给当前导航一个className=active)的更多相关文章

  1. 原生JS获取元素的位置与尺寸

    1.内高度.内宽度: 内边距 + 内容框 element.clientWidth element.clientHeight 2.外高度,外宽度: 边框 + 内边距 + 内容框 element.offs ...

  2. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  3. 放弃jQuery,使用原生js吧!

    转自:http://itakeo.com/blog/2015/07/28/nojq/ 随着IE6.7.8的逐渐淘汰,HTML5的兴起,以及侧重点放在了移动端,jQuery可能变的不在那么重要,原生一样 ...

  4. 利用tween,使用原生js实现模块回弹动画效果

    最近有一个需求,就是当屏幕往下一定像素时,下方会有一个隐藏的模块马上显现出来,向上运动后带有回弹效果.然后屏幕滚回去时这个模块能够原路返回 其实这个效果css3就可以很轻松实现,但是公司要求最低兼容i ...

  5. 用原生JS写移动动画案例及实际应用

    js很强大 相信很多人都知道,那么它有哪些强大之处呢?有兴趣的人可以去查查,这里就不赘述了,因为不在本片文章讨论的范围. 我们要讲的是怎么用原生JS写移动动画?我们先举一个最简单的动画例子,很多网站的 ...

  6. 跨浏览器的placeholder – 原生JS版

    转自来源 : http://www.ifrans.cn/placehoder/ 跨浏览器的placeholder – 原生JS版 html5为input元素新增了一个属性”placeholder”,提 ...

  7. 原生js实现table的排序

    原生js实现table的排序 今天遇到了一个问题就是使用原生js对table标签进行排序 一开始的时候陷入了一个误区就是首先获取table,然后每次比较完大小都会交换children的值,准备到最后吧 ...

  8. 用原生 JS 实现双向绑定及应用实例

    写在前面: 所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更也能实时展现到界面.angular封装了双向绑定的方法,使双向绑定变得十分简单.但是在有些场景下(比如下面那个场景),不能使用 ...

  9. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

随机推荐

  1. MySQL入门命令

    SQL(Structured Query Language) SQL是结构化查询语言,是一种用来操作RDBMS的数据库语言,当前关系型数据库都支持使用SQL语言进行操作,也就是说可以通过 SQL 操作 ...

  2. centos查看系统/硬件信息及运维常用命令

    [root@yan-001 ~] # uname -a # 查看内核/操作系统/CPU信息的linux系统信息命令 [root@yan-001 ~] # head -n 1 /etc/issue # ...

  3. (二)Knockout 文本与外观绑定

    Visible Visible binding会依据绑定的数据来决定相应的DOM元素是否隐藏,hidden或visible. 我们首先在js文件部分定义一个view model,这里我创建的是一个ob ...

  4. [BZOJ4913][SDOI2017]遗忘的集合

    题解: 首先先弄出$f(x)$的生成函数$$f(x)=\prod_{i=1}^{n} {{(\frac{1}{1-x^i})}}^{a[i]}$$因为$f(x)$已知,我们考虑利用这个式子取推出$a[ ...

  5. SQL反模式学习笔记14 关于Null值的使用

    目标:辨别并使用Null值 反模式:将Null值作为普通的值,反之亦然 1.在表达式中使用Null: Null值与空字符串是不一样的,Null值参与任何的加.减.乘.除等其他运算,结果都是Null: ...

  6. 在react-native项目中使用iconfont自定义图标库(android)

    1. 安装react-native-vector-icons yarn add react-native-vector-icons react-native link 如果没有关联成功的话,可以参考官 ...

  7. websocket-heartbeat-js心跳检测库正式发布

    前言: 两年前写了一篇websocket心跳的博客——初探和实现websocket心跳重连.  阅读量一直比较大,加上最近考虑写一个自己的npm包,因此就完成了一个websocket心跳的检测库.在这 ...

  8. HttpConnection

    1.HttpConnection 用于接受和发送网络数据 网络操作必须新开个子线程执行,否则会出现 ANR(Application Not Response) 应用无响应异常 Get: /** * 通 ...

  9. Django模型操作常用方法

    1.Save() 基本方法:object.save() save顾名思义是保存的意思,在django中既可以进行新增也可以进行修改操作.具体判定的算法如下: 1.如果对象的主键属性为一个求值为True ...

  10. 对迭代器操作的python 模块

    import itertools import more_itertools 目前用到的more_itertools.ilen(range(10)) --->返回可迭代的数量.这回消耗迭代,小心 ...