Wordpress：CSS在子页面内保持菜单项处于活动状态

Posted 2023-03-06

【中文标题】Wordpress：CSS在子页面内保持菜单项处于活动状态

【英文标题】：Wordpress: CSS keeping menu item active when inside child pages

【发布时间】：2014-09-24 23:37:00

【问题描述】：

我已经研究了几个小时了，但仍然无法弄清楚。当我在其子页面中浏览时，我希望关于导航菜单链接保持白色背景...

当我在子页面内浏览时，如何保持 navlink css 处于活动状态？

查看页面菜单项处于活动状态

当内部菜单项子菜单项不再活动时

我的 CSS

我已经尝试了 wordpress 导航参考http://codex.wordpress.org/Function_Reference/wp_nav_menu#Menu_Item_CSS_Classes 中的几乎所有内容

【问题讨论】：

不知道你用的是什么 php，但这会给你一些帮助：

wordpress.stackexchange.com/questions/107398/…

【参考方案1】：

如果您右键单击“关于”选项卡（当其中一个子页面打开时），您应该能够检查该元素。 （我使用 Chrome，但其他浏览器有此选项。）您应该会看到类似这样的内容。 （这是我主题中的一个例子）：

<li id="menu-item-387" class="menu-item menu-item-type-post_type menu-item-object-page     current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-387"><a href="#">About</a>

选择其中一个类并添加一些 CSS。我使用 'current-menu-parent' 选择器。

(#menu .current-menu-parent > a 
    background: #fff;   (or whatever styling you need to add)

希望这会有所帮助。如果没有，并且您的网站可以通过网络访问，那么 url 真的很有帮助。

【讨论】：

你是天上派来的天使！ ：） 太感谢了！我选择了：#menu .current-page-ancestor a ...

【参考方案2】：

当您在子页面上时，该活动子页面的父页面的菜单项或菜单链接有一个类current-page-ancestor，

您只需将其添加到您的 CSS 文件或自定义 CSS 中即可激活您的菜单

li.current-page-ancestor a 
color: #0286ff !important; // or whatever style you want