原生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_Runtime&Process&ProcessBuilder
目录 一.Runtime类 二.Process类 三.ProcessBuilder类 在Java中想调用外部程序,或者执行命令和可运行文件时,网上的典型实例一般都是通过Runtime.getTime( ...
- mac svn无法保存密码,JetBrains IDE(WebStrom、IntelliJ IDEA) 反复提示输入密码
一.vim ~/.subversion/config用vim修改以下四个地方store-passwords = yesstore-plaintext-passwords = yesstore-ssl- ...
- Ubuntu-linux云服务器下安装开启虚拟环境失败解决办法
为什么要安装虚拟环境? 1.某些项目需要安装旧的包,开发相应功能 2.项目开发时,安装部分环境不希望影响整机环境 如何安装? 首先安装python 安装pip工具 sudo apt-get insta ...
- jade模板 注意事项
1. jade模板 语法 doctype html html head body header div 2. 添加内容:直接在标签后边加空格 直接写内容 如下: div 我要写的内容 3. ...
- 末学者daylight__Linux磁盘管理及LVM
一.硬盘接口 从整体的角度上,硬盘接口分为IDE.SATA.SCSI和SAS四种,IDE接口硬盘多用于家用产品中,也部分应用于服务器,SCSI接口的硬盘则主要应用于服务器市场,而SAS只在高端服务器上 ...
- ~/Library/MobileDevice/Provisioning Profiles
~/Library/MobileDevice/Provisioning Profiles
- WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!问题
➜ web_develop git:(master) ✗ ssh root@172.16.146.143@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ...
- java代码获取多边形的中心点
package com.skjd.util; import java.util.ArrayList; import java.util.List; /** * 坐标以及电子围栏相关的工具类 * @au ...
- 2018山东省赛sequence
2018山东省赛sequence因为必须要删除一个数,所以可以计算每个数删除的代价,从而选取代价最小的进行删除如果一个数大于它前面的所有数的最小值而小于次小值,删除最小值的代价就要+1:如果一个数本身 ...
- 2018.我的NOIP补全计划
code: efzoi.tk @ shleodai noip2011 D1 选择客栈 这道题是一道大水题,冷静分析一会就会发现我们需要维护最后一个不合法点和前缀和. 维护最后一个不合法点只要边扫描边维 ...