一个函数实现跨页面导航菜单定位

16年暑假做项目的时候因为导航栏定位问题折腾了好长时间,但一直没有想出来比较好的解决办法。前段时间的那个项目感觉突然明白了,实现了一个自认为比较简单的跨页导航栏定位的方法。

这个方法是通过给URL添加参数来实现的。目前只适用于一级菜单定位,多级菜单定位后续会修改更新。

具体实现原理:通过 ul 列表写菜单,进入页面首先执行函数获取定位用的参数,并修改相应菜单的CSS属性。在当前页面获取点击的下一个菜单项的 index() 属性,同时获取菜单指向的URL地址,给URL添加 index 参数来唯一识别菜单项。但添加参数时涉及到参数分隔符的问题,因此需要判断所要添加的index 参数是否为URL的第一个参数,若是第一个参数,则分隔符应该用 “?”;若不是第一个参数,则分隔符应该使用“&”。

JS代码:

函数代码

HTML代码:

HTML

实现效果:

URL无参数情况

URL带参数情况

以上就是简单的一级菜单定位的实现,关于多级菜单定位,后续会更新的~

实现方法是菜鸟的拙见,如有建议或更好的方法,欢迎批评指正。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180202G0NKNI00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励