I want to have active menu items in my navigation based on URL and ID, not href. None of the available solutions (this one, this one , or this one) worked for me.
My Navigation looks like this
<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>
The URL, if clicked on menu item 1
, is https://example.de/App_AspxFiles/P_Bogendaten.aspx?IDNavi=194
. I want to add the class menuactive
to the parent element (div which includes nav_ebene_2
)
I need to compare the id
with the current url, if it matches, add menuactive
. This would be my way, but the if conditions is never true.
var currenturl = window.location.href
for (const div of document.querySelectorAll("#PageNavigation nav-item")) {
if (div.id == currenturl ) {
div.parentElement.classList.add("activemenu");
}
}
Thank you very much!