活动菜单项不是基于 URL 而是基于变量答案

【问题标题】：Active menu item NOT based on URL but based on a variable活动菜单项不是基于 URL 而是基于变量
【发布时间】：2022-01-15 22:01:42
【问题描述】：

我想在我的网站上有一个包含活动项目的菜单。应该添加一个类来激活该项目。由于该项目有神秘的 URL，基于 URL 的解决方案是不可能的。相应菜单项的文本显示在相应的页面标题中。

我的想法是将页面标题id="navtopheader" 与菜单项中的文本进行比较。如果相等，则将menuactive 类添加到相应的菜单项。

我的 HTML 基本上是这样的：

<div id="navtopheader" class="navtopheader">menu item 1</div>
...
<div class="nav_ebene_2">
   <p>menu item 1</p>
</div>
<div class="nav_ebene_2">
   <p>menu item 2</p>
</div>
...

我实际上可以以一种低效的方式做到这一点：

var headertext = document.getElementById("navtopheader").innerText

var menutext0 = document.getElementsByClassName("nav_ebene_2")[0].innerText
var navlist = document.getElementsByClassName("nav_ebene_2");
if (headertext == menutext0) {
    navlist[0].classList.add("activemenu");
}

var menuitem1 = document.getElementsByClassName("nav_ebene_2")[1].innerText
if (headertext == menuitem1) {
    navlist[1].classList.add("activemenu");
}
...

但由于整个网站的菜单项数量不同，如果我包含太多/太少的菜单项，我会收到一条错误消息。

有合适的解决方案吗？我尝试了一整天，但没有解决问题。谢谢！

【问题讨论】：

标签： javascript html jquery css

【解决方案1】：

遍历<p>s 的集合，它们是nav_ebene_2 的子代。找到匹配项后，将该类添加到其父类。

const headerText = document.querySelector('#navtopheader').textContent;
for (const p of document.querySelectorAll('.nav_ebene_2 p')) {
  if (p.textContent === headerText) {
    p.parentElement.classList.add('activemenu');
  }
}

【讨论】：