做网站的过程中,我们往往需要给当前菜单项添加一个 CSS 类(如 active 或 current ),然后给这个 CSS 类写一些样式,以标明用户位置。这对提高网站的用户体验度是有好处的,用户一眼就能看出来当前处于哪个页面。
如果你使用的是 WordPress 内置的菜单功能添加的菜单,就不用往下看了,因为 WordPress 会自动添加一个 current-menu-item 的 CSS 类到当前页面的菜单,本例子中的代码适合那些把菜单写死在页面中的情况。下面我们来看一下实现这个需求需要的代码。
jQuery(function(){
jQuery("a").each(function(){ //这里是选择页面上所有的链接,可根据实际需要缩小选择范围
if (jQuery(this).attr("href") == location.href){ //如果浏览器打开的网址和页面中的链接地址相同
jQuery(this).addClass("selected"); //添加 selected 类到当前链接上
}
});
});
会用 jQuery 的朋友通过代码一眼就能看出来,以上功能实现的原理就是判断当前页面的地址是都和页面中的链接地址相同,如果相同,就添加一个 selected 类到页面中的链接上。
其实 WordPress 内置菜单添加 current-menu-item 的原理和上面的原理是类似的,只不过 WordPress 是通过后端 PHP 代码实现的,而本例子是通过前端 jQuery 实现的。