16年暑假做项目的时候因为导航栏定位问题折腾了好长时间,但一直没有想出来比较好的解决办法。前段时间的那个项目感觉突然明白了,实现了一个自认为比较简单的跨页导航栏定位的方法。
这个方法是通过给URL添加参数来实现的。目前只适用于一级菜单定位,多级菜单定位后续会修改更新。
具体实现原理:通过 ul 列表写菜单,进入页面首先执行函数获取定位用的参数,并修改相应菜单的CSS属性。在当前页面获取点击的下一个菜单项的 index() 属性,同时获取菜单指向的URL地址,给URL添加 index 参数来唯一识别菜单项。但添加参数时涉及到参数分隔符的问题,因此需要判断所要添加的index 参数是否为URL的第一个参数,若是第一个参数,则分隔符应该用 “?”;若不是第一个参数,则分隔符应该使用“&”。
JS代码:
函数代码
HTML代码:
HTML
实现效果:
URL无参数情况
URL带参数情况
以上就是简单的一级菜单定位的实现,关于多级菜单定位,后续会更新的~
实现方法是菜鸟的拙见,如有建议或更好的方法,欢迎批评指正。
领取专属 10元无门槛券
私享最新 技术干货