使用 jQuery 给当前菜单项加 current css 类

文 / @WordPress主题

小本本的自我介绍

我是小本本,一个热爱编程的人。我喜欢写代码,喜欢不断地学习和探索新的技术。

如何为当前菜单项添加CSS类

在制作网站时,为当前菜单项添加CSS类是很重要的,这样可以让用户更加容易地理解自己所在的位置。对于使用WordPress内置菜单功能的网站来说,WordPress会自动为当前页面添加一个current-menu-item的CSS类,但对于手动写菜单的网站,我们需要自己实现这个功能。

我们可以通过jQuery来实现这个功能。以下是具体的代码:

jQuery(function(){
  jQuery("a").each(function(){
    if(jQuery(this).attr("href")==location.href){
      jQuery(this).addClass("selected");
    }
  });
});

使用jQuery可以很方便地选择页面上的所有链接,并判断它们的地址是否和当前页面地址相同。如果相同,就给链接添加一个selected类。

WordPress内置菜单添加current-menu-item的原理

如果你使用的是WordPress内置菜单功能,那么不需要手动添加CSS类,WordPress会自动为当前页面添加一个current-menu-item的类。这个功能的原理和上面的jQuery实现方式类似,只是具体实现方法不同。

在WordPress中,后端PHP代码会检测当前页面的URL是否与菜单项链接的URL相同,如果相同,就为该菜单项添加current-menu-item的CSS类。

总之,为当前菜单项添加CSS类可以提高用户体验度,让用户更容易理解自己所在的位置。使用jQuery或WordPress内置菜单功能都可以实现这个功能,具体选择哪种方式取决于你使用的网站建设方式。

添加UTHEME为好友
扫码添加UTHEME微信为好友
· 分享WordPress相关技术文章,主题上新与优惠动态早知道。
· 微信端最大WordPress社群,限时免费入群。