js实现当前导航菜单高亮显示

2019独角兽企业重金招聘Python工程师标准>>>

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

<div id="navi">
<ul>
<li><a href="1.html">主页</a></li>
<li><a href="2.html">栏目1</a></li>
</ul>
</div>

下面是js代码：

<script type="text/javascript" language="javascript">
var nav = document.getElementById("navi");
var links = nav.getElementsByTagName("li");
var lilen = nav.getElementsByTagName("a");
var currenturl = document.location.href;
var last = 0;
for (var i=0;i<links.length;i++)
{var linkurl =  lilen[i].getAttribute("href");if(currenturl.indexOf(linkurl)!=-1){last = i;}
}links[last].className = "hl";
</script>

复制这段js代码加到body里。注意：
1.getElementById("navi");这一句括号里的navi必须与<div id="navi">里的navi一致。
2.js代码必须加到body里，即加到导航的下面，不能加到head里，否则出错不能使用。
3.links[last].className = "hl";中的hl是高亮代码的样式类名。
最后再写一下高亮的css代码就可以了，如下：

#navi ul li.hl a{
color:#123456;
}

这样就实现当前导航菜单高亮显示了。

转载于:https://my.oschina.net/duanvincent/blog/394123

js实现当前导航菜单高亮显示相关推荐

【荐】自己做一款不错的JS+CSS多级导航菜单
代码简介: 自己做一款不错的二级导航菜单,黑色风格,是根据仿淘宝支付宝菜单而做的,自我感觉还算行吧. 代码内容: <!DOCTYPE HTML PUBLIC "-//W3C//DTD ...
弧形背景html,JS实现带圆弧背景渐变效果的导航菜单代码
本文实例讲述了JS实现带圆弧背景渐变效果的导航菜单代码.分享给大家供大家参考.具体如下: 这是一款效果个性的JS+CSS导航菜单,鼠标经过时出现有趣弧形背景,实际上,这里用CSS调用了背景,用Java ...
CSS+JS灰色树型菜单导航代码
代码简介: CSS+JS打造的树型菜单,没有怎么美化,颜色看上去也不很美,提供一种思路,真想用的朋友好好修改一下颜色,里面都有注释,相信通过你的努力,它最终的效果一定很漂亮. 代码内容: <!D ...
300+Jquery, CSS, MooTools 和 JS的导航菜单资源
如果你是网站前端开发人员,那么对你来说,也许做一个漂亮导航菜单会很得心应手.本文要为大家总结各种导航菜单的资源,以便让大家的网站前端开发的工作更方便更快速,只要选择现成的例子就可以应用于自己的网站了. ...
JS仿淘宝网顶部的导航菜单
代码简介: JS仿淘宝网顶部的导航菜单.整合了购物车,收藏夹,搜索,搜索,网站导航等功能的导航. 代码内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...
JS+CSS实现漂亮实用的红色导航菜单
代码简介: 强烈推荐一款CSS导航菜单,用到政府学校类网站上超级不错,有点类似站长网菜单的味道,只不过颜色不一样而已,这种菜单还不是真正意义上的"下拉"菜单,应该叫滑出菜单吧?反正 ...
JS超级酷的导航菜单代码
代码简介: JS超级酷的导航菜单代码,类似WINDOWS风格的导航,又又立体效果,很不错的,赶快运行一下,一睹为快吧. 代码内容: <HTML> <HEAD> <TITL ...
html 顶部导航栏隐藏,js和css3智能隐藏和显示的顶部导航菜单
这是一款使用js和css3制作的智能隐藏和显示的顶部导航菜单.该顶部导航菜单在页面向下滚动时可以帧动画隐藏,在向上滚动到一定距离时优惠显示出来. 使用方法 HTML结构使用元素作为该导航菜单的HTM ...
js鼠标滚动到某个位置导航菜单显示
js鼠标滚动到某个位置导航菜单显示: <script> $(function(){ var pcontent_right_height = $(".pcontent_right& ...

js实现当前导航菜单高亮显示

js实现当前导航菜单高亮显示相关推荐

最新文章

热门文章