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

小本本的自我介绍

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

如何为当前菜单项添加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微信为好友

· 分享WordPress相关技术文章，主题上新与优惠动态早知道。
· 微信端最大WordPress社群，限时免费入群。