我想在我的导航中拥有基于URL和ID的活动菜单项,而不是href。没有一个可用的解决方案(这个、这个或这个)对我有用。
我的导航如下所示
<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>
如果单击menu item 1
,则 URLhttps://example.de/App_AspxFiles/P_Bogendaten.aspx?IDNavi=194
。我想将类menuactive
添加到父元素(div,其中包括nav_ebene_2
)
我需要将id
与当前网址进行比较,如果匹配,请添加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");
}
}
谢谢!
如果您从window.location
读取 URI
const params = new URLSearchParams(window.location.search);
const id = params.get("IDNavi");
console.log(id) // "194"
或者...如果您已经将 URI 地址作为字符串
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
然后,要获取其父级,请使用 Element 的 .closest() 方法:
const EL_id_parent = EL_id.closest(".nav_ebene_2");
最后,您可以添加所需的活动类
EL_id_parent.classList.add("activemenu");
演示时间:
使类活动为 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>