导航菜单中突出显示的锚点

Question

我有一个WordPress系统。问题是我的导航菜单。我的菜单中有一个子站点 link，主站点的一部分有一个锚点。
因此，如果我 link 这样的锚点： #test 它可以在主站点上运行。如果我想在子网站上单击它，它不起作用。

如果我 link 这样的锚点：http://localhost/#test 它在子站点上有效。

但在主页上锚点被突出显示。我知道这是因为它是当前菜单项，但我不想突出显示它。我可以像正常颜色一样设置 class 当前菜单项的样式。

但我希望活动 link 突出显示。

我对答案的想法是，也许我 link 是这样的：#test 然后我将 link 重定向到：http://localhost/#test

不过如果有其他解决方案就好了。我无法在 www 中找到有关此主题的内容。如果有人有好的文档那就太好了。

谢谢你帮助我:)

Answer 1

如果你这样使用它：
#test 它指的是当前访问站点上的锚点。

所以对于主站点来说，它将是
yourwebsite.tld/#测试

在子网站上它将是
你的网站。tld/subside/#test

非常不同的东西。

使用完整 link 以便菜单始终指向相同的信息部分。

如果您不想突出显示完整的 link，您可能需要使用 JavaScript。

你可以，例如。将 class 添加到所有带有锚标记的菜单 link - 并取消突出显示效果。
或者您可以将每个菜单 link 与 url 栏中的当前 url 进行比较 - 如果这不是完美匹配 - 添加 class / 或添加 class 如果是绝配。

Answer 2

所以我找到了解决办法。我添加了一些JS来删除添加高亮效果的CSS class。

所以这很完美。一开始有点困难，因为我不能 select menu-item 和 getElementsByClassName。但是使用 querySelector 它工作正常。

JS 代码如下所示：
对于第一个主播：

document.querySelector("#menu-navigation-de-1 > li.menu-item.menu-item-type-custom.menu-item-object-custom.current-menu-item.current_page_item.menu-item-home.menu-item-49874.nav-item").classList.remove("current-menu-item");

对于第二个主播：

document.querySelector("#menu-navigation-de-1 > li.menu-item.menu-item-type-custom.menu-item-object-custom.current-menu-item.current_page_item.menu-item-home.menu-item-300.nav-item").classList.remove("current-menu-item");

谢谢@ibes 对我的帮助。 :)

导航菜单中突出显示的锚点

Highlighted anchor in nav menu

html

css

wordpress

anchor

web