基于 URL 和 ID 的活动菜单项

Question

我希望在我的导航中有基于 URL 和 ID 的活动菜单项， 而不是 href。 None 个可用解决方案 (this one, this one , or ) 对我有用。

我的导航看起来像这样

<nav id="PageNavigation">
    <div class="nav_ebene_2">
        <div role="button" class="nav-item" id="P_Bogendaten.aspx?IDNavi=194">
            <p>menu item 1</p>
        </div>
    </div>
</nav>

URL，如果点击 menu item 1，则为 https://example.de/App_AspxFiles/P_Bogendaten.aspx?IDNavi=194。我想将 class menuactive 添加到父元素（div 其中包括 nav_ebene_2）

我需要比较id和当前的url，如果匹配，添加menuactive。这将是我的方式，但 if 条件永远不会为真。

  var currenturl  = window.location.href
  for (const div of document.querySelectorAll("#PageNavigation nav-item")) {
    if (div.id == currenturl ) {
      div.parentElement.classList.add("activemenu");
    }
  }

非常感谢！

Answer 1

如果您从 window.location

读取 URI

const params = new URLSearchParams(window.location.search);
const id = params.get("IDNavi");

console.log(id) // "194"

或... 如果您已经有一个 URI 地址 String

const uriString = "https://example.de/App_AspxFiles/P_Bogendaten.aspx?IDNavi=194";
const id = new URL(uriString).searchParams.get("IDNavi");

console.log(id); // "194"

现在您已经提取了所需的 ID，只需定位所需的元素，例如：

const EL_id = document.querySelector(`[id$="IDNavi=${id}"]`);

属性选择器 [] 在 DOM 中查询 id 在 IDNavi=194

中结束 $= 的元素

然后，要获取其父元素，请使用元素的 .closest() 方法：

const EL_id_parent = EL_id.closest(".nav_ebene_2");

最后你可以 添加所需的 active class

EL_id_parent.classList.add("activemenu");

演示时间：
使 class active 成为 ID 以特定查询参数值结尾的元素：

const uriString = "https://example.de/App_AspxFiles/P_Bogendaten.aspx?IDNavi=194";
const id = new URL(uriString).searchParams.get("IDNavi");

/*
// you should use this instead, the above is for this DEMO only 
const params = new URLSearchParams(window.location.search);
const id = params.get("IDNavi");
*/

const EL_id = document.querySelector(`[id$="IDNavi=${id}"]`);
const EL_id_parent = EL_id.closest(".nav_ebene_2");
EL_id_parent.classList.add("activemenu");

.activemenu {
  background: gold;
}

<nav id="PageNavigation">
  <div class="nav_ebene_2">
    <div role="button" class="nav-item" id="P_Bogendaten.aspx?IDNavi=194">
      <p>IDNavi=194</p>
    </div>
  </div>
  <div class="nav_ebene_2">
    <div role="button" class="nav-item" id="P_Bogendaten.aspx?IDNavi=195">
      <p>IDNavi=195</p>
    </div>
  </div>
</nav>

基于 URL 和 ID 的活动菜单项

Active menu item based on URL and ID

html

javascript

css

navigation

jquery