获取当前页面的地址栏。与导航栏中所有<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>
如对本文有疑问, 点击进行留言回复!!
VScode中的react自动补全标签代码及黄色or红色警告
关于React处理input的方法和多个input共用一个方法(不用jQuery)
网友评论