jQuery如何实现根据location地址在导航栏高亮显示当前页面-职坐标

jQuery如何实现根据location地址在导航栏高亮显示当前页面

沉沙 2018-12-28 来源：阅读 1474 评论 0

摘要：本篇教程探讨了jQuery如何实现根据location地址在导航栏高亮显示当前页面，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

本篇教程探讨了jQuery如何实现根据location地址在导航栏高亮显示当前页面，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

jQuery如何实现根据location地址在导航栏高亮显示当前页面

获取当前页面的地址栏。与导航栏中所有<a> 标签的href属性进行比较。如果相等则高亮显示此<a>标签。
注意点：a 标签的href 属性在浏览器解析时是绝对路径。
　　　　a 标签的href 如果是锚点，则 pathname ， href都与 location的 pathname ，href相等，但hash 属性会存储锚点，所以还需判断是否是锚点。
代码：
1 <script src="../static/assets/vendors/jquery/jquery.js"></script>
2 <script>
3   $(function(){
4     $(".aside a").each(function(index,value){ //each（）是jQ对象中的方法，只能用来遍历jQ对象与foreach 中的形参相反。第一个形参是索引，第二个是dom对象
5        if(value.pathname == location.pathname && value.hash == location.hash){
6          $(value).parent().addClass("active"); //高亮的样式
7          $(value).parent().parent().addClass("in"); //展开列表
8          $(value).parent().parent().prev().removeClass("collapsed"); //改变箭头指向
9        }else if(location.pathname == "/admin/" && index == 0){ //如果是首页（index）
10          $(value).parent().addClass("active"); //高亮显示
11        }
12     })
13   });
14
15 </script>