实用技巧-用js实现导航菜单当前页面点击切换选中时高亮状态

功能需求

今天在写一个站点需要用到在导航菜单点击链接跳转到新页面后,高亮当前菜单样式。

简单的说,就是我点击导航菜单中的一个栏目,跳转到该栏目下,该栏目菜单也同时高亮(可以是背景色也可以是背景图片)

解决方法

通过查看实例,我们需要用到JS中的jquery来实现这种效果,也可以通过CSS设置不同页面的a:hover实现效果,不过这显然是比较笨拙的方法。

实现原理

实现它所用的原理就是通过js中的location.href得到当前页面的地址,然后在与导航上的链接地址匹对,相同的就用一个css样式标记。此方法支持动态链接和静态链接多种形式。

效果图:

实用技巧-用js实现导航菜单当前页面点击切换选中时高亮状态

很简单实用的代码。特别是不方便在导航上面添加样式的时候,可以选择使用这个代码。

下载源码

文件下载

俊霖

发表评论

您必须