2017/07

讲解版的导航高亮（新手福利）原生JS

发布时间：2017-07-01 13:58:09

发布者：pengyifeng

浏览量:

为了增加用户体验度，增加网页的易用性和美观度，往往需要把当前导航菜单以特殊方式显示，通常是高亮显示或有不同于其它菜单的背景，有两种方法可以实现，第一种是用纯css来实现，二是用js辅助css来实现，两个种方法都比较简单，相对而言js更简单些，下面介绍用js来实现的方法：

这是导航的样式

HTML：


    主页1

    
主页2

    
主页3

    
主页4

当前导航高亮显示能够提升用户体验，因为在网站中每个顶级导航栏对应不同的页面，那么我们如何让它在对应的页面时，对应的li高亮呢？下面我们用js代码写下操作。

JS代码：



var nav = document.getElementById("navs");
var links = nav.getElementsByTagName("li");
var lilen = nav.getElementsByTagName("a");
var currenturl = document.location.href;
var last = 0;
for (var i=0;i

演示地址：http://www.cnwenhui.cn/d/demo/dh/1.html

上一篇：站内优化中的内链在网站建设中扮演什么角色？

下一篇： php中的命名空间

关键词:

返回列表

2024-03-17

很多人都知道的三个Python编码常用小技巧查看详情

2022-04-25

6个白嫖党必备网站,免费且实用,你想要的资源全都有查看详情

2022-04-19

语音转文字的软件有哪些?3款实用软件分享查看详情

2022-04-18

网站关键词优化百度排名提高SEO外包推广计划查看详情

2022-04-15

网站代码优化的内容有哪些? 查看详情