原生js标识当前导航位置(给当前导航一个className=active)
导航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)的更多相关文章
- 原生JS获取元素的位置与尺寸
1.内高度.内宽度: 内边距 + 内容框 element.clientWidth element.clientHeight 2.外高度,外宽度: 边框 + 内边距 + 内容框 element.offs ...
- 原生JS封装简单动画效果
原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...
- 放弃jQuery,使用原生js吧!
转自:http://itakeo.com/blog/2015/07/28/nojq/ 随着IE6.7.8的逐渐淘汰,HTML5的兴起,以及侧重点放在了移动端,jQuery可能变的不在那么重要,原生一样 ...
- 利用tween,使用原生js实现模块回弹动画效果
最近有一个需求,就是当屏幕往下一定像素时,下方会有一个隐藏的模块马上显现出来,向上运动后带有回弹效果.然后屏幕滚回去时这个模块能够原路返回 其实这个效果css3就可以很轻松实现,但是公司要求最低兼容i ...
- 用原生JS写移动动画案例及实际应用
js很强大 相信很多人都知道,那么它有哪些强大之处呢?有兴趣的人可以去查查,这里就不赘述了,因为不在本片文章讨论的范围. 我们要讲的是怎么用原生JS写移动动画?我们先举一个最简单的动画例子,很多网站的 ...
- 跨浏览器的placeholder – 原生JS版
转自来源 : http://www.ifrans.cn/placehoder/ 跨浏览器的placeholder – 原生JS版 html5为input元素新增了一个属性”placeholder”,提 ...
- 原生js实现table的排序
原生js实现table的排序 今天遇到了一个问题就是使用原生js对table标签进行排序 一开始的时候陷入了一个误区就是首先获取table,然后每次比较完大小都会交换children的值,准备到最后吧 ...
- 用原生 JS 实现双向绑定及应用实例
写在前面: 所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更也能实时展现到界面.angular封装了双向绑定的方法,使双向绑定变得十分简单.但是在有些场景下(比如下面那个场景),不能使用 ...
- 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前
思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...
随机推荐
- 【由浅入深理解java集合】(四)——集合 Queue
今天我们来介绍下集合Queue中的几个重要的实现类.关于集合Queue中的内容就比较少了.主要是针对队列这种数据结构的使用来介绍Queue中的实现类. Queue用于模拟队列这种数据结构,队列通常是指 ...
- Vue使用watch监听一个对象中的属性
问题描述 Vue提供了一个watch方法可以让使用者去监听某些data内的数据变动,触发相应的方法,比如 queryData: { name: '', creator: '', selectedSta ...
- Codeforces Round #443 (Div. 1) C. Tournament
题解: 思路挺简单 但这个set的应用好厉害啊.. 我们把它看成图,如果a存在一门比b大,那么a就可以打败b,a——>b连边 然后求强联通分量之后最后顶层的强联通分量就是能赢的 但是因为是要动态 ...
- tensorflow 传入值-【老鱼学tensorflow】
上个文章中讲述了tensorflow中如何定义变量以及如何读取变量的方式,本节主要讲述关于传入值. 变量主要用于在tensorflow系统中经常会被改变的值,而对于传入值,它只是当tensorflow ...
- BZOJ4451 [Cerc2015]Frightful Formula 多项式 FFT 递推 组合数学
原文链接http://www.cnblogs.com/zhouzhendong/p/8820963.html 题目传送门 - BZOJ4451 题意 给你一个$n\times n$矩阵的第一行和第一列 ...
- Centos下安装配置Mongodb3.6
首先更新系统 yum -y update 1.安装Mongodb 编辑Mongodb安装源 vim /etc/yum.repos.d/mongodb-org-3.6.repo 编辑内容如下: [mon ...
- 用户管理和su,id 命令
useradd userdel usermod groupadd groupdel 用户管理 为什么需要有用户? 1. linux是一个多用户系统 2. 权限管理(权限最小化) 用户:存在的目录是为了 ...
- randint模块无法加载
原因:把程序文件名命名为 random.py 导致 random.randint 加载的是这个文件的模块
- Django聚合分组查询、常用字段
首先回顾sql中聚合和分组的概念: 如果没有分组,会把整张表作为一个大组,查询字段必须是聚合结果:如果有分组,分组之后,必须要使用聚合的结果作为having的条件. 聚合查询 聚合:aggregate ...
- [R] R语言for循环机制
在做数据分段截取的时候,发现for循环的表现和其他语言不太一样. 上代码: :) { i = i + print(i) } 结果: [] [] [] [] 即作为循环计次的i, 并不会因为在循环体中的 ...